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

【问题标题】：insertAdjacentElement is not adding or appending the element in the target elementinsertAdjacentElement 未在目标元素中添加或附加元素
【发布时间】：2022-01-19 03:22:41
【问题描述】：

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

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

    return divElement
}

之后我创建了另一个函数，它返回 elements 或 structure of Tooltip 我正在制作

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 函数的最后一行 i.e 在主体上附加 .tooltip-parent div 正在工作其余代码不起作用，这意味着该行上方的元素未附加在目标元素中。

如您所见，只有我在 body 上附加的元素在 DOM 中呈现

【问题讨论】：

tooltip-parrent-zd8ptq 附加到 DOM 的位置在哪里？
@EmielZuurbier 我错误地删除了该行代码等等让我编辑我的问题！谢谢??????

标签： javascript typescript dom dom-manipulation

【解决方案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，但我没有看到使用前者比使用后者有真正的优势。

【讨论】：

成功了！ ?? 谢谢！！