真的有必要使用数组，在子删除后显示完整节点列表的innerHTML吗？

Posted 2023-05-07

【中文标题】真的有必要使用数组，在子删除后显示完整节点列表的innerHTML吗？

【英文标题】：Is it really necessary to use array, to display an innerHTML of a complete node list after child remove?

【发布时间】：2014-05-01 23:19:18

【问题描述】：

这段代码运行良好，但是当我开始删除节点时，完整的列表消失了，我在 innerhtml 中只剩下一个节点，而不是逐渐删除，这正是我想要的。可能逐渐地而不是直接在innerHTML中显示的所有显示删除的div中都显示删除的说......我可以完美地做到这一点以使用数组但我很好奇是否有一个不使用任何（数组）的出路？

HTML 代码

<button onClick="remov()">remove</button>
<button onClick="addDiv()">Add Div</button>
<div>
<div></div>
<div></div><div></div>
<div></div>
</div>
<div id="tt"></div>

javascript 代码

var stage = document.getElementsByTagName("div")[0];
var tt = document.getElementById("tt");

function remov() 
    if (stage.hasChildNodes()) 
        stage.removeChild(stage.firstChild);
        for (var i = 0; i < stage.childNodes.length; i++) 
            tt.innerHTML = stage.childNodes[i].nodeName;
        

        if (!stage.hasChildNodes()) 
            tt.innerHTML = "no nodes";
        
    


for (var i = 0; i < stage.childNodes.length; i++) 
    tt.innerHTML += stage.childNodes[i].nodeName;


function addDiv() 
    var a = document.createElement("div");
    stage.appendChild(a);
    if (!stage.hasChildNodes()) 
        tt.innerHTML += stage.firstChild.nodeName;
     else 
        tt.innerHTML += stage.lastChild.nodeName
    

jsfiddle

【问题讨论】：

" " 上面的格式不正确。

【参考方案1】：

如果要在删除期间显示所有 div，需要将 = 更改为 +=，如下所示

function remov() 
    tt.innerHTML=''; //EDIT forgot to add in this line
    if (stage.hasChildNodes()) 
        stage.removeChild(stage.firstChild);
        for (var i = 0; i < stage.childNodes.length; i++) 
            tt.innerHTML += stage.childNodes[i].nodeName;  //<------- + needed to display all divs
        

        if (!stage.hasChildNodes()) 
            tt.innerHTML = "no nodes";
        
    

编辑Fiddle添加

【讨论】：

我试了一百万次一百万次，还是没有得到我想要的结果，就是逐步删除。

不确定你想要什么结果。我现在添加了我在小提琴中建议的更改，它似乎在单击删除按钮时一次删除每个孩子。

是的 jing 那是正确的结果，现在如果它要求不高，你能给我提示一下 innerHTML='' 是什么意思吗？

如果有 HTML 比如 contents更多东西甚至更多

感谢您的帮助，感谢您让我记住了 innerHTML 方法。让我们看看我这次是否正确，innerHTML ='blank'是这个例子中的div的字符串，它会擦除​​父节点的a的子节点。这次我做对了吗？就像您提到的阅读或设置一样，是这样吗？在我的情况下，由于额外的编码，它让位给了一个新的子节点，对吗？