正文

掌握原生JS，轻松实现元素后插入：5种方法详解及实战案例

/0 浏览量
0406

在Web开发中，元素插入是常见的操作，特别是在动态内容生成和更新时。原生JavaScript为我们提供了多种方式来实现元素的后插入。以下是五种常用的方法，以及如何在实际项目中应用这些方法。

方法一：使用 insertAdjacentHTML

insertAdjacentHTML 方法允许你将HTML插入到元素的指定位置。它接收两个参数：第一个参数是插入的位置，第二个参数是要插入的HTML字符串。

代码示例

// 将HTML插入到元素的最后
element.insertAdjacentHTML('beforeend', '<div>新元素</div>');

// 将HTML插入到元素的开始
element.insertAdjacentHTML('afterbegin', '<div>新元素</div>');

// 在元素内部插入
element.insertAdjacentHTML('afterend', '<div>新元素</div>');

// 在元素内部插入
element.insertAdjacentHTML('beforebegin', '<div>新元素</div>');

实战案例

假设我们有一个列表，想要在列表的最后添加一个新的列表项。

<ul id="myList">
  <li>项目1</li>
  <li>项目2</li>
</ul>

var myList = document.getElementById('myList');
myList.insertAdjacentHTML('beforeend', '<li>项目3</li>');

方法二：使用 appendChild

appendChild 方法可以将节点添加到DOM的末尾。对于元素节点，它等同于 insertAdjacentHTML('beforeend', '<element>内容</element>')。

代码示例

// 创建一个新的元素
var newElement = document.createElement('li');
newElement.textContent = '新元素';

// 将新元素添加到列表的末尾
myList.appendChild(newElement);

实战案例

同样，对于上面的列表，我们可以使用 appendChild 来添加一个新元素。

var newElement = document.createElement('li');
newElement.textContent = '项目3';
myList.appendChild(newElement);

方法三：使用 insertBefore

insertBefore 方法可以在指定的参考节点之前插入一个新的节点。

代码示例

// 创建一个新的元素
var newElement = document.createElement('li');
newElement.textContent = '新元素';

// 在列表的第二个元素之前插入新元素
var secondItem = myList.children[1];
myList.insertBefore(newElement, secondItem);

实战案例

如果我们想在第二个列表项之前插入一个新项：

var newElement = document.createElement('li');
newElement.textContent = '项目3';
var secondItem = myList.children[1];
myList.insertBefore(newElement, secondItem);

方法四：使用 cloneNode

cloneNode 方法可以创建一个节点的深拷贝，包括它的所有子节点。

代码示例

// 创建一个元素的副本
var clonedElement = myList.cloneNode(true);

// 将副本插入到列表的末尾
myList.parentNode.insertBefore(clonedElement, myList.nextSibling);

实战案例

复制整个列表并添加到末尾：

var clonedList = myList.cloneNode(true);
myList.parentNode.insertBefore(clonedList, myList.nextSibling);

方法五：使用 innerHTML

innerHTML 属性允许你设置元素的HTML内容。它可以用来插入元素，但不如前四种方法灵活。

代码示例

// 将HTML字符串设置为元素的内部HTML
myList.innerHTML += '<li>新元素</li>';

实战案例

添加一个新的列表项到列表中：

myList.innerHTML += '<li>项目3</li>';

以上五种方法都是实现元素后插入的有效手段。选择哪种方法取决于你的具体需求和场景。希望这些方法能够帮助你更轻松地在原生JavaScript中实现元素的后插入。

-- 展开阅读全文 --