JS 在元素后面添加元素|极客笔记

JS 在元素后面添加元素

在前端开发中，经常会遇到需要在页面上添加新元素的情况。有时候我们需要在现有元素的后面添加新元素，这就需要使用 JavaScript 来操作 DOM (文档对象模型)。

在本文中，我们将详细讨论如何使用 JavaScript 在元素后面添加新元素。我们将介绍两种方法：append() 方法和 insertAdjacentHTML() 方法。

使用 append() 方法

append() 方法用于在指定元素的末尾添加新的元素或文本。它接受一个或多个参数，每个参数可以是一个 DOM 元素、文本节点或者 HTML 字符串。

下面是一个简单的示例，演示如何使用 append() 方法在一个 div 元素的后面添加一个新的 p 元素：

<!DOCTYPE html>
<html>
<head>
    <title>Append Example</title>
</head>
<body>

<div id="container">
    <p>This is a paragraph.</p>
</div>

<script>
    // 获取需要添加新元素的父元素
    var container = document.getElementById('container');

    // 创建一个新的 p 元素
    var newParagraph = document.createElement('p');
    newParagraph.textContent = 'This is a new paragraph added using append method.';

    // 在 container 后面添加新的 p 元素
    container.append(newParagraph);
</script>

</body>
</html>

在上面的示例中，我们首先获取了 id 为 container 的 div 元素，然后创建了一个新的 p 元素并设置其文字内容，最后使用 append() 方法将新的 p 元素添加到 container 后面。

当我们运行上面的代码时，可以看到页面上已经成功添加了一个新的 p 元素，内容为 “This is a new paragraph added using append method.”。

使用 insertAdjacentHTML() 方法

insertAdjacentHTML() 方法可在指定元素的相对于当前元素位置插入指定的 HTML 字符串。它接受两个参数：插入位置和要插入的 HTML 字符串。

下面是一个示例，演示如何使用 insertAdjacentHTML() 方法在一个 div 元素的后面添加一个新的 p 元素：

<!DOCTYPE html>
<html>
<head>
    <title>insertAdjacentHTML Example</title>
</head>
<body>

<div id="container">
    <p>This is a paragraph.</p>
</div>

<script>
    // 获取需要添加新元素的父元素
    var container = document.getElementById('container');

    // 在 container 后面添加新的 p 元素
    container.insertAdjacentHTML('afterend', '<p>This is a new paragraph added using insertAdjacentHTML method.</p>');
</script>

</body>
</html>

在上面的示例中，我们同样首先获取了 id 为 container 的 div 元素，然后使用 insertAdjacentHTML() 方法在 container 后面插入了一个新的 p 元素。

当我们运行上面的代码时，可以看到页面上已经成功添加了一个新的 p 元素，内容为 “This is a new paragraph added using insertAdjacentHTML method.”。

通过上面的示例，我们学习了如何使用 JavaScript 在元素后面添加新元素。这两种方法各有优劣，可以根据实际需求选择合适的方法来操作 DOM。