insertAdjacentElement 未在目标元素中添加或附加元素

Question

我创建了一个函数来创建div

function createDivElement(className: string): HTMLDivElement {
    const divElement = document.createElement('div')
    divElement.className = className

    return divElement
}

之后我创建了另一个函数returns elements or structure of Tooltip I aming

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 }
}

最后我创建了一个创建工具提示的函数

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)
}

现在在 DOM 函数的最后一行即在主体上附加 .tooltip-parent div 正在运行其余代码是无法正常工作，这意味着此行上方的元素未附加到目标元素中。

正如你所看到的，只有我附加在 body 上的元素在 DOM

中呈现

Answer 1

每次调用 generateTooltip() 都会生成一组新元素。例如，调用 generateTooltip().TooltipParent 两次将为您提供两个不同的 TooltipParent div。因此没有元素被正确引用和附加。

解决方法是只调用 generateTooltip() 一次，然后使用该调用中的所有元素来构建您的结构。

const TooltipElement = function (props: Props) {
  const { 
    TooltipParent, 
    Tooltip, 
    TooltipArrow, 
    TooltipContent 
  } = generateTooltip();

  Tooltip.append(TooltipArrow, TooltipContent);
  TooltipParent.append(Tooltip);
  document.body.append(TooltipParent);
}

我将 Tooltip 重命名为 TooltipElement 以避免重名，因为函数中已经有 Tooltip 元素。

您仍然可以使用 insertAdjacentElement 而不是 append，但我没有看到使用前者相对于后者的真正优势。

insertAdjacentElement 未在目标元素中添加或附加元素

insertAdjacentElement is not adding or appending the element in the target element

javascript

dom

dom-manipulation

typescript