2

在我当前的项目中，我收到了 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 - 我正在尝试这样的东西，但它似乎并没有选择所有元素。建议？

    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();
}
4

1 回答 1

3

解决这个问题的方法是

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>");

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

于 2019-07-02T12:38:10.890 回答