创建 DOM 元素

本教程将向您展示如何创建一个 DOM 元素并将其附加到 DOM 树。

要创建 DOM 元素，可以使用 createElement() 方法。

const element = document.createElement(htmlTag);Code language: JavaScript (javascript)

以下示例创建一个新的 <div> 元素

const e = document.createElement('div');Code language: JavaScript (javascript)

并用任何 HTML 内容填充 <div> 元素

e.innerHTML = 'JavaScript DOM';Code language: JavaScript (javascript)

并使用 appendChild() 方法将 <div> 元素附加到 DOM 树

document.body.appendChild(e);Code language: CSS (css)

除了使用 innerHTML 属性之外，还可以使用 DOM 方法创建文本节点并将文本节点附加到新元素

var textnode = document.createTextNode('JavaScript DOM');
e.appendChild(textnode); Code language: JavaScript (javascript)

之后，可以使用 appendChild() 方法将新元素附加到 DOM 树。