如何删除 JavaScript 中元素之后的元素

Question

在我当前的项目中，我收到了 xhr 请求，我将它们放在像这样的元素之后：el.insertAdjacentHTML('afterend', "foo bar"); 但我还没有找到一种方法来删除给定 element 之后的所有内容，否则标记将被填满。

我可以用另一个容器包裹它，但出于性能原因，我正在尝试使用尽可能少的 dom 元素。

我找到了几个 JQuery 的解决方案，这也不是一个选项，因为它太大了。

假设我有一个 nav 元素，它位于其父容器的顶部，我想在它之后放置一些东西，但在我必须删除之前存在的东西之前。

有什么想法吗？提前致谢

在网上和此处搜索，只找到 jq 解决方案，没有 vanilla js。

JS

    el = document.querySelector("nav.mainNav");
    el.insertAdjacentHTML('afterend', "foo bar");

HTML

    <div>
    <nav></nav>
    <nav></nav>
    <nav class="mainNav"></nav>
    {...CONTENTSHOULD BE PLACED HERE, PLACING WORKS, REMOVING NOT...}
    </div>

JSII - 我正在试验类似的东西，但它似乎没有 select 所有元素。建议？

    var el = document.querySelectorAll("html > body > 
    nav.mainNav + *");

            for ( var i = 0; i < el.length; i++ ){
                el[i].remove();
            }

我找到了自己的解决办法，感谢四位的帮助！

var el = document.querySelectorAll("html > body > *:nth-child(1n+3)");
for ( var i = 0; i < el.length; i++ ){
    el[i].remove();
}

Answer 1

解决这个问题的方法是

el = document.querySelector("nav.mainNav");

var insertedContent = document.querySelector(".insertedContent");
if(insertedContent) {
    insertedContent.parentNode.removeChild(insertedContent);
}
el.insertAdjacentHTML('afterend', "<span class ='insertedContent'>foo bar</span>");

只需将内容放在一个元素中，并在您希望替换该元素（如果存在）时将其删除！

如何删除 JavaScript 中元素之后的元素

How to remove elements after an element in JavaScript

javascript

insertadjacenthtml