📌  相关文章
📜  如何在不使用库的情况下在 JavaScript 中的另一个元素之后插入一个元素? - Javascript(1)

📅  最后修改于: 2023-12-03 15:38:38.395000             🧑  作者: Mango

如何在不使用库的情况下在 JavaScript 中的另一个元素之后插入一个元素? - Javascript

在 JavaScript 中,我们可以使用以下方法在不使用库的情况下在另一个元素之后插入一个元素:

let parentElement = document.getElementById('parent');
let newElement = document.createElement('div');
newElement.innerHTML = 'New Element';

// Get the next sibling element
let nextSibling = parentElement.nextElementSibling;

// If no next sibling, insert as last child
if (!nextSibling) {
  parentElement.appendChild(newElement);
} else {
  parentElement.insertBefore(newElement, nextSibling);
}

在上面的代码中,我们首先获取要插入新元素的父元素。然后,我们创建一个新元素并设置其 HTML 内容。接下来,我们获取父元素的下一个兄弟元素(即要插入新元素的位置)。如果没有下一个兄弟元素,则将新元素插入到父元素的最后一个子元素的位置。

如果有下一个兄弟元素,则使用 insertBefore 方法将新元素插入到其之前。

这是一个简单而有效的方法,可以在不使用任何库的情况下操作 DOM。


参考资料: