在 div 之后追加 - JavaScript

在开发网页时，我们经常需要在已有元素之后添加新的元素或内容，这时就需要使用 JavaScript 编写代码来实现这一功能。本文将介绍如何在 div 之后追加内容的方法。

方式一：innerHTML

可以使用 innerHTML 属性来向元素中添加 HTML 内容，包括标签和文本。在 JavaScript 中，我们可以通过获取相应的 div 元素，然后使用 innerHTML 属性对其内容进行修改，从而实现在 div 之后追加内容的功能。

const div = document.getElementById('myDiv');
div.innerHTML += '<p>This is my new paragraph.</p>';

此代码将在 id 为 myDiv 的元素之后添加一个新的 <p> 元素。

方式二：insertAdjacentHTML

使用 insertAdjacentHTML 方法可以在元素的指定位置插入新的 HTML 内容。该方法有两个必需的参数：插入位置和要插入的 HTML 字符串。插入位置有四种不同的选项：beforebegin、afterbegin、beforeend 和 afterend。

const div = document.getElementById('myDiv');
div.insertAdjacentHTML('afterend', '<p>This is my new paragraph.</p>');

此代码将在 id 为 myDiv 的元素之后插入一个新的 <p> 元素。

方式三：createElement 和 appendChild

使用 createElement 方法可以创建一个新的元素，然后使用 appendChild 方法将其添加到父元素中。在 JavaScript 中，我们可以获取已有的父元素，然后使用 createElement 方法创建一个新的节点，最后使用 appendChild 方法将其添加到父元素中。

const div = document.getElementById('myDiv');
const newPara = document.createElement('p');
const paraText = document.createTextNode('This is my new paragraph.');
newPara.appendChild(paraText);
div.parentNode.insertBefore(newPara, div.nextSibling);

此代码将在 id 为 myDiv 的元素之后添加一个新的 <p> 元素，并向其中添加了文本内容。

以上是在 div 之后追加内容的三种方法，可以根据具体需求选择使用哪种方式。