在我的 HTML 中，我有一个内容 div，其中包含由 php 脚本创建并使用 JQuery 和 Javascript 处理的文章。使用 Javascript，我使用“getElementsByClassName”函数将这些文章收集到一个数组中。 我在这里编写的脚本和 HTML 已被简化。我需要这个数组，因为我试图让如果数组的长度大于 10，则每页只显示 10 篇文章。所以第 1 页将是数组的索引 0 到 9，第 2 页的索引是 10 到 19，等等。 现在，
接受这段 html 代码。
<body>
<div id="content">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</content>
</body>
还有这段 Javascript 代码。
$.post("getarticles.php",{ page:"home" } ,function(data){
//place the content
document.getElementById("content").innerHTML = jQuery.trim(data);
//put elements in array
arrArticles = document.getElementsByClassName("article");
alert(arrArticles.length);
document.getElementById("content").innerHTML = "";
alert(arrArticles.length);
})
第一个警报给了我“3”，这是正确的。但是第二个警报给了我“0”。为什么在将元素放入数组后数组会丢失它的元素？
顺便说一下，'data' 变量是由 php 脚本传递的 HTML 字符串。 例如:在 php 脚本中我有代码
echo "<div class="article"><p>Article 1</p></div><div class="article"><p>Article 2</p></div><div class="article"><p>Article 3</p></div>"
&
document.getElementById("contentWrap").innerHTML = "";
我知道这是导致问题的原因，但我不知道为什么。任何人都可以解释或提供替代方案吗？
提前致谢
最佳答案
getElementsByClassName() 返回一个动态数组(实际上是一个实时 NodeList)，如果/当您修改 DOM 时，该数组将动态更改。因此，如果您使用 innerHTML 更改内容并且该数组中的元素受到影响，则该数组将自动更改。
如果你想保留这个元素列表并使其不活动(这样当 DOM 改变时它不会改变)，你可以将 NodeList 复制到一个普通数组(不是动态的)一旦它位于普通数组中，对 DOM 元素的引用将防止它们被破坏。如果您的代码更改了它们的内容，它不会阻止它们被更改，但即使您的代码导致它们从 DOM 中删除，它也会保留它们。
将动态 NodeList 复制到静态数组中的一种方法是这样的:
// fetch dynamic NodeList
var items = document.getElementsByClassName("article");
// make static copy of NodeList into normal array
items = Array.prototype.slice.call(items);
或者，因为你的帖子是用 jQuery 标记的，所以你可以首先使用 jQuery，它包含一个不受 DOM 中其他更改影响的静态节点数组:
var items = $(".article");
关于javascript - 放入后数组元素丢失 .innerHTML = ""，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12977868/