javascript - How do i overwrite everything inside a div except for one element

Question

I have something like below

<div id="contributors_div">
     <div id="arrow-up"></div>
</div>

I am populating contributors_div with some text(data) on different anchor clicks. My <div id="arrow-up"></div> has image of an arrow which has to be shown.

Below is how i am populating the div (or say overwriting)

var ul_data = "";
for ( var i = 0; i < CONTRIBUTORS.length; i++) {
    ul_data = ul_data + "<li><h3>" + CONTRIBUTORS[i] + "</h3></li>";
}
$("#contributors_div").html(ul_data);

But this is removing the arrow as well. When i useappend, my old data also gets appended which is not as desired. Can anyone tell me the correct way. Thanks

Answer 1

IMO 更清洁的方法是<ul></ul>在箭头旁边插入一个容器并填充/清空它。

<div id="contributors_div">
     <ul></ul>
     <div id="arrow-up"></div>
</div>

接着

$('#contributors_div ul').html(ul_data);

Answer 2

你可以这样做：

$("#contributors_div *:not(#arrow-up)").remove();

然后append()...

jsFiddle

（可能你应该使用箭头作为一个类而不是 ID，我猜它不是整个页面上唯一的箭头）

Answer 3

鉴于 li 元素应该属于 ol 或 ul 元素，我会将您的结构更新为：

<div id="contributors_div">
     <ul></ul>
     <div id="arrow-up"></div>
</div>

然后你可以说：

$("#contributors_div ul").html(ul_data);

...只是更新列表的内容。（当然，如果需要，您可以给 ul 一个 id 或类，但没有它也可以。）

但是要更字面地回答您的问题，您可以使用.detach()方法暂时删除箭头，然后在进行其他更改后将其返回.append()：.prepend()

var $arrowUp = $("#arrow-up").detach();
var ul_data = "";
for ( var i = 0; i < CONTRIBUTORS.length; i++) {
    ul_data = ul_data + "<li><h3>" + CONTRIBUTORS[i] + "</h3></li>";
}
$("#contributors_div").html(ul_data)
                      .append($arrowUp);

Answer 4

我的首选方式如下所示（虽然它有点hacky！）

<div id="contributors_div">
 </div>

jquery部分将是

$("#contributors_div").html("<div id=\"arrow-up\"></div>"); $("#contributors_div").append(ul_data);

Answer 5

如果它有效，试试这个：

$("#contributors_div").children().not("#arrow-up").remove();
var ul_data = "";
for ( var i = 0; i < CONTRIBUTORS.length; i++) {
    ul_data = ul_data + "<li><h3>" + CONTRIBUTORS[i] + "</h3></li>";
}
$("#contributors_div").append(ul_data);

not()首先，我从 div 的 except( ) 中删除所有内容#arrow-up，然后运行你的循环来创建一个 ul，然后最后将它附加到你的 div 中。

工作小提琴。