Dom 结点创建 基础知识

DOM（Document Object Model）是一种用来访问和操作 HTML 或 XML 文档的标准 API。在 JavaScript 中，通过 DOM API 可以在文档中创建新的节点，也可以对现有的节点进行操作。

创建 DOM 结点

在页面中创建 DOM 节点有两种方式：通过 HTML 代码创建，或者通过 JavaScript 代码动态创建。

通过 HTML 代码创建

在 HTML 代码中可以直接编写元素的 HTML 代码，然后将其添加到文档中。例如：

<div id="myDiv">
  <p>Hello, World!</p>
</div>

如果需要修改这个节点，可以通过 JavaScript 代码访问这个节点并进行修改。

通过 JavaScript 代码创建

另一种方式是通过 JavaScript 代码动态创建节点。创建节点的方法有很多种，下面介绍其中两种方式。

使用 createElement 方法创建元素节点

createElement 方法可以用来创建一个元素节点，例如：

// 创建一个新的 div 元素
var newDiv = document.createElement('div');

// 给这个新元素设置一些属性
newDiv.id = 'myDiv';
newDiv.className = 'myClass';

// 把新元素添加到页面中
document.body.appendChild(newDiv);

使用 createTextNode 方法创建文本节点

createTextNode 方法可以用来创建一个文本节点，例如：

// 创建一个新的文本节点
var newTextNode = document.createTextNode('Hello, World!');

// 把文本节点添加到一个元素节点中
var myDiv = document.getElementById('myDiv');
myDiv.appendChild(newTextNode);

示例说明

示例一

下面的代码通过使用 createElement 方法和 appendChild 方法, 创建了一个新的 div 元素，并把它添加到了页面的 body 元素中。

// 创建一个新的 div 元素
var newDiv = document.createElement('div');

// 给这个新元素设置一些属性
newDiv.id = 'myDiv';
newDiv.className = 'myClass';

// 把新元素添加到页面中
document.body.appendChild(newDiv);

示例二

下面的代码通过使用 createTextNode 方法和 appendChild 方法, 创建了一个新的文本节点，并把它添加到了已有的 div 元素中。

// 创建一个新的文本节点
var newTextNode = document.createTextNode('Hello, World!');

// 把文本节点添加到一个元素节点中
var myDiv = document.getElementById('myDiv');
myDiv.appendChild(newTextNode);