I have developed a function that generates a div
function createDivElement(className: string): HTMLDivElement {
const divElement = document.createElement('div')
divElement.className = className
return divElement
}
Following that, I crafted another function that provides the elements or structure of a Tooltip I am constructing
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 }
}
Lastly, I defined a function that produces the tooltip
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)
}
Now in the DOM, only the last line of the function - where the '.tooltip-parent' div is appended to the body - is functioning properly. The elements above this line are not being added to the target element as intended.
As observed, only the element being appended to the body is visible in the DOM