insertAdjacentElement未在目標元素中添加或附加元素-有解無憂

我創建了一個函式來創建 div

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

    return divElement
}

之后我創建了另一個函式，它回傳我正在制作的元素或結構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函式的最后一行，即在主體上附加.tooltip-parentdiv 正在作業，其余代碼不起作用，這意味著該行上方的元素沒有附加到目標元素中。

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

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

uj5u.com熱心網友回復：

每次呼叫時generateTooltip()，都會生成一組新元素。例如，呼叫generateTooltip().TooltipParent兩次會給你兩個不同的TooltipParentdiv。因此沒有正確參考和附加任何元素。

解決方案在于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，但我沒有看到使用前者優于后者的真正優勢。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/414867.html

標籤：

上一篇：使用pandas資料框值進行迭代

下一篇：如何知道何時播放實際音頻？