Javascript中怎么添加节点

在Javascript中，我们可以使用DOM（文档对象模型）来添加、删除和修改HTML节点。这些节点可以是元素、属性、文本或者注释。

添加节点主要有两种方式：动态创建节点和克隆已有节点。

一、动态创建节点

动态创建节点是在Javascript中创建一个全新的节点，它没有被添加到页面上。

有四种方法可以动态创建节点：

1. document.createElement()

创建一个元素节点，语法：

document.createElement(tagName)

例如，在创建一个p元素节点时，可以使用以下代码：

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

2. document.createTextNode()

创建一个文本节点，语法：

document.createTextNode(text)

例如，在创建一个文本节点“Hello World”时，可以使用以下代码：

var text = document.createTextNode("Hello World");

3. document.createAttribute()

创建一个属性节点，语法：

document.createAttribute(attrName)

例如，在创建一个class属性时，可以使用以下代码：

var attr = document.createAttribute("class");

4. document.createComment()

创建一个注释节点，语法：

document.createComment(text)

例如，在创建一个注释节点“这是一个注释”时，可以使用以下代码：

var comment = document.createComment("这是一个注释");

二、克隆节点

克隆节点是在Javascript中复制一个已有的节点，并将其添加到页面上。

有两种方法可以克隆节点：

1. node.cloneNode()

克隆一个节点，语法：

node.cloneNode(deep)

deep是一个可选的参数，指定是否克隆所有子节点，默认为false，只复制当前的节点。

例如，克隆一个div节点，可以使用以下代码：

var div = document.querySelector("div");
var clone = div.cloneNode(true);

2. node.importNode()

将一个节点从另一个文档中导入到当前文档中，语法：

node.importNode(externalNode, deep)

externalNode是要导入的节点，deep是一个可选的参数，指定是否克隆所有子节点，默认为false，只复制当前的节点。

例如，在导入一个外部文档中的div节点时，可以使用以下代码：

var externalDoc = new DOMParser().parseFromString("<div>这是外部文档中的div</div>", "text/html");
var externalDiv = externalDoc.querySelector("div");
var div = document.querySelector("div");
var clone = document.importNode(externalDiv, true);
div.appendChild(clone);

注意：在使用克隆方法创建新节点时，需要将新节点添加到页面上才能起到作用。

三、添加节点

添加节点需要使用到节点的父节点和appendChild()方法。

语法：

parentNode.appendChild(node)

例如，在添加一个p元素节点时，可以使用以下代码：

var parent = document.querySelector("div");
var para = document.createElement("p");
parent.appendChild(para);

四、添加节点的属性

添加节点的属性需要使用到setAttribute()方法。

语法：

node.setAttribute(name, value)

例如，在添加一个class属性时，可以使用以下代码：

var para = document.createElement("p");
para.setAttribute("class", "para");

五、添加节点的文本

添加节点的文本需要使用到文本节点和nodeValue属性。

语法：

node.nodeValue = value

value是要添加的文本，如以下代码所示：

var para = document.createElement("p");
var text = document.createTextNode("Hello World");
para.appendChild(text);