Javascript 创建 DOM

DOM（文档对象模型）是网页中所有元素的层次结构。可以使用 Javascript 创建、修改、删除和插入 DOM 元素。

如下就是一个简单的例子，创建一个包含有两个段落的 div 元素，然后将其添加到页面中：

let div = document.createElement("div");let p1 = document.createElement("p");let p2 = document.createElement("p");let text1 = document.createTextNode("这是第一个段落。");let text2 = document.createTextNode("这是第二个段落。");p1.appendChild(text1);p2.appendChild(text2);div.appendChild(p1);div.appendChild(p2);document.body.appendChild(div);

上述代码通过 Javascript 动态创建了一个包含两个段落的 div 元素，并将其添加到页面中。可以看到，DOM 的创建非常简单。

创建元素

可以使用 document.createElement() 方法创建元素，例如：

let para = document.createElement("p");

上述代码创建了一个 p 元素。可以在括号里传递任何合法的 HTML 标签名，例如 div、span、table 等等。

设置元素属性

可以使用 setAttribute() 方法设置元素的属性，例如：

para.setAttribute("class", "my-class");para.setAttribute("id", "my-id");

上述代码设置了 p 元素的 class 和 id 属性。

添加元素到 DOM 中

可以使用 appendChild() 方法将元素添加到另一个元素中，例如：

let div = document.createElement("div");div.appendChild(para);

上述代码将 p 元素添加到了 div 元素中。

获取元素

可以使用 document.getElementById() 方法获取页面中的元素，例如：

let elem = document.getElementById("my-id");

上述代码获取了具有 id 为 "my-id" 的元素。

删除元素

可以使用 removeChild() 方法从 DOM 中删除元素，例如：

let elem = document.getElementById("my-id");elem.parentNode.removeChild(elem);

上述代码删除了具有 id 为 "my-id" 的元素。

修改元素

可以使用 innerHTML 属性修改元素的内容，例如：

para.innerHTML = "这是新的内容。";

上述代码将 p 元素的内容设置为 "这是新的内容。"。

总结一下，DOM 的创建、修改、删除和插入非常容易，只需要使用一些简单的 Javascript 方法即可完成。掌握 DOM 操作是网页开发中非常重要的一部分。