js append()方法|极客笔记

js append()方法

1. 简介

在编写前端网页时，经常需要向DOM元素中添加新的内容。JavaScript中的append()方法是一种常用的DOM操作方法，可以向元素中追加新的子元素或文本。

append()方法接受一个或多个参数，这些参数可以是HTML元素、文本节点或字符串。当append()方法使用多个参数时，它会按照参数的顺序将它们依次添加到目标元素中。

2. 语法

append()方法的基本语法如下：

element.append(content1, content2, ..., contentN)

其中，element是一个DOM元素，content1到contentN是要追加的内容。这些内容可以是HTML元素、文本节点或字符串。

3. 添加HTML元素

使用append()方法可以向元素中添加HTML元素。下面是一个示例代码：

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
  <h1>原始内容</h1>
</div>

<script>
var div = document.getElementById("myDiv");
var p = document.createElement("p");
var text = document.createTextNode("这是一个新段落。");
p.appendChild(text);
div.append(p);
</script>

</body>
</html>

运行结果如下：

原始内容

这是一个新段落。

在上面的示例中，首先通过document.getElementById()方法获取了id为”myDiv”的元素，并将其赋值给变量div。然后，使用document.createElement()方法创建了一个元素，并将其赋值给变量p。接下来，使用document.createTextNode()方法创建了一个文本节点，并将其赋值给变量text。最后，通过appendChild()方法将文本节点添加到元素中，然后通过append()方法将元素添加到div中。

4. 添加文本节点

除了可以添加HTML元素，append()方法还可以直接向元素中添加文本节点。下面是一个示例代码：

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
  <h1>原始内容</h1>
</div>

<script>
var div = document.getElementById("myDiv");
var text = document.createTextNode("这是一个新段落。");
div.append(text);
</script>

</body>
</html>

运行结果如下：

原始内容

这是一个新段落。

在上面的示例中，首先通过document.getElementById()方法获取了id为”myDiv”的元素，并将其赋值给变量div。然后，使用document.createTextNode()方法创建了一个文本节点，并将其赋值给变量text。最后，通过append()方法将文本节点添加到div中。

5. 添加字符串

除了可以添加HTML元素和文本节点，append()方法还可以添加字符串。下面是一个示例代码：

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
  <h1>原始内容</h1>
</div>

<script>
var div = document.getElementById("myDiv");
div.append("这是一个新段落。");
</script>

</body>
</html>

运行结果如下：

原始内容

这是一个新段落。

在上面的示例中，首先通过document.getElementById()方法获取了id为”myDiv”的元素，并将其赋值给变量div。然后，通过append()方法将字符串”这是一个新段落。”添加到div中。

6. 添加多个内容

append()方法还可以用于一次性添加多个内容。下面是一个示例代码：

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
  <h1>原始内容</h1>
</div>

<script>
var div = document.getElementById("myDiv");
var p = document.createElement("p");
var text1 = document.createTextNode("第一个段落。");
var text2 = document.createTextNode("第二个段落。");
p.appendChild(text1);
p.append(text2, "同时添加字符串。");
div.append(p);
</script>

</body>
</html>

运行结果如下：

原始内容

第一个段落。第二个段落。同时添加字符串。

在上面的示例中，首先通过document.getElementById()方法获取了id为”myDiv”的元素，并将其赋值给变量div。然后，使用document.createElement()方法创建了一个元素，并将其赋值给变量p。接下来，使用document.createTextNode()方法分别创建了两个文本节点，并将其赋值给变量text1和text2。然后，通过appendChild()方法将第一个文本节点添加到元素中。最后，通过append()方法将第二个文本节点和字符串”同时添加字符串。”一起添加到div中。