0
172
VistasinsertAdjacentElement no está agregando o agregando el elemento en el elemento de destino
Creé una función para crear div .
function createDivElement(className: string): HTMLDivElement { const divElement = document.createElement('div') divElement.className = className return divElement } después de eso, creé otra función que devuelve elementos o estructura de información sobre Tooltip que estoy haciendo
function generateTooltip() { const TooltipParent = createDivElement(`tooltip-parent-${randomString(8)}`) const Tooltip = createDivElement(`tooltip-${randomString(8)}`) const TooltipArrow = createDivElement(`tooltip-arrow-${randomString(8)}`) const TooltipContent = createDivElement(`tooltip-content-${randomString(8)}`) return { TooltipParent, Tooltip, TooltipArrow, TooltipContent } }y finalmente hice una función que crea información sobre herramientas
const Tooltip = function (props: Props) { 'use strict' // rest of the code generateTooltip().Tooltip.insertAdjacentElement('afterbegin', generateTooltip().TooltipArrow) generateTooltip().Tooltip.insertAdjacentElement('beforeend', generateTooltip().TooltipContent) generateTooltip().TooltipParent.insertAdjacentElement('afterbegin', generateTooltip().Tooltip) // appending on the body document.body.appendChild(generateTooltip().TooltipParent) } Ahora en DOM , la última línea de la función, es decir .tooltip-parent div en el cuerpo funciona, el resto del código no funciona, lo que significa que los elementos sobre esta línea no se agregan en el elemento de destino.
Como puede ver, solo el elemento que estoy agregando en el cuerpo se está representando en el DOM
1 Respuestas
Responde la pregunta0
Cada vez que llamas a generateTooltip() , generas un nuevo conjunto de elementos. Por ejemplo, si llama a generateTooltip().TooltipParent dos veces, obtendrá dos TooltipParent diferentes. Por lo tanto, no se hace referencia a ningún elemento ni se agrega correctamente.
La solución radica en llamar a generateTooltip() solo una vez y usar todos los elementos de esa única llamada para construir su estructura.
const TooltipElement = function (props: Props) { const { TooltipParent, Tooltip, TooltipArrow, TooltipContent } = generateTooltip(); Tooltip.append(TooltipArrow, TooltipContent); TooltipParent.append(Tooltip); document.body.append(TooltipParent); } TooltipElement Tooltip evitar nombres duplicados, ya que ya tiene un elemento de Tooltip dentro de la función.
Todavía puede usar insertAdjacentElement en lugar de append , pero no vi una ventaja real de usar el primero sobre el segundo.