如何在动态创建的元素内插入 span 标签？答案

【问题标题】：How can I insert a span tag inside of a dynamically created element?如何在动态创建的元素内插入 span 标签？
【发布时间】：2022-01-20 11:09:01
【问题描述】：

所以我有这个 html 代码，我正在尝试使用 dom 操作来复制

<h1 id="intro-text">
    HAMADILYTICAL<span id="word">Grill</span>
</h1>

我为该特定跨度设置了一些样式，以便它不会在同一行中呈现。这是我尝试过的，但它显然不会起作用，因为我将子节点附加在该节点之后，而不是它内部。

// main content
const mainContent = document.createElement('div');
const introText = document.createElement('h1');
const span = document.createElement('span');
mainContent.className = 'main-content';
introText.id = 'intro-text';
span.id = 'word';
introText.textContent = `HAMADILYTICAL Grill`;
content.appendChild(mainContent);
mainContent.appendChild(introText);
introText.appendChild(span);

【问题讨论】：

您必须以某种方式设置<span> 的样式；您发布的代码中似乎没有任何尝试这样做。 CSS 不关心添加到 DOM 的顺序。

标签： javascript html css dom

【解决方案1】：

使用 innerHTML 修复它

const mainContent = document.createElement('div');
const introText = document.createElement('h1');
mainContent.className = 'main-content';
introText.id = 'intro-text';
introText.innerHTML = `<h1 id="intro-text">
HAMADILYTICAL <span id="word">Grill</span></h1>`;
content.appendChild(mainContent);
mainContent.appendChild(introText);

【讨论】：