JavaScript中的append()方法详解|极客笔记

JavaScript中的append()方法详解

在JavaScript中，append()方法用于在指定元素的末尾添加一个或多个新的子元素。这个方法在操作DOM时非常有用，可以通过JavaScript动态地向页面添加元素。

语法

append()方法的语法如下：

parentElement.append(newElement)

其中，parentElement是要添加子元素的父元素，newElement是要添加的新子元素。

参数

append()方法可以接受一个或多个参数，每个参数都是要添加的子元素。这些参数可以是一个元素、字符串、或者其他内容。

返回值

append()方法没有返回值。

示例

让我们来看一个简单的示例，演示如何使用append()方法向一个<div>元素添加一个新的<p>元素。

// 创建一个新的段落元素
var newParagraph = document.createElement("p");
newParagraph.textContent = "这是一个新的段落元素";

// 获取父元素
var parentElement = document.getElementById("content");

// 在父元素末尾添加新的段落元素
parentElement.append(newParagraph);

在这个示例中，我们首先创建了一个新的段落元素，然后通过getElementById()方法获取到一个id为content的<div>元素，最后使用append()方法将新的段落元素添加到<div>元素的末尾。

如果我们在HTML中有如下结构的元素：

<div id="content"></div>

运行上述示例代码后，页面会动态地添加一个新的段落元素到<div>元素中，最终效果如下：

<div id="content">
    <p>这是一个新的段落元素</p>
</div>

多个子元素

除了添加单个子元素，append()方法还可以接受多个参数，以便一次向父元素添加多个子元素。

// 创建新的段落元素
var paragraph1 = document.createElement("p");
paragraph1.textContent = "第1个段落元素";

var paragraph2 = document.createElement("p");
paragraph2.textContent = "第2个段落元素";

// 获取父元素
var parentElement = document.getElementById("content");

// 在父元素末尾添加多个段落元素
parentElement.append(paragraph1, paragraph2);

在这个示例中，我们创建了两个新的段落元素，并同时将它们添加到了<div>元素中。最终效果如下：

<div id="content">
    <p>第1个段落元素</p>
    <p>第2个段落元素</p>
</div>

字符串参数

除了元素以外，append()方法还可以接受字符串作为参数，用于添加文本内容。

// 获取父元素
var parentElement = document.getElementById("content");

// 在父元素末尾添加文本内容
parentElement.append("这是一段文本内容");

在这个示例中，我们直接向<div>元素中添加了一段文本内容。最终效果如下：

<div id="content">
    这是一段文本内容
</div>

总结

append()方法是一个非常方便的方法，可以在JavaScript中动态地向页面添加元素。通过append()方法，我们可以向父元素添加一个或多个子元素，以及文本内容。这在编写交互性强的页面时非常有用，可以让页面在用户交互时动态地改变内容。

JavaScript中的append()方法详解