为啥添加innerHTML后循环和数组停止工作？

Posted 2023-05-07

【中文标题】为啥添加innerHTML后循环和数组停止工作？

【英文标题】：Why loop and array stops working after adding innerHTML?为什么添加innerHTML后循环和数组停止工作？

【发布时间】：2020-03-04 20:44:43

【问题描述】：

除了内部html 外，一切正常。我从父母那里得到名字，但只要我在代码中添加innerHTMl，它就不起作用了。我想从循环中的每个父母那里得到innerHTML，数组...，我不知道为什么它不起作用，我错在哪里？

例子：

function myFunction() 
  var divs = Array.prototype.slice.call(document.getElementById("container").querySelectorAll('*'));
  var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
  var divshtml = Array.prototype.slice.call(document.getElementsByClassName("parent")).querySelectorAll('*').innerHTML;
  // Loop over the array
  var results = "";
  var name = "";
  divsname.forEach(function(div) 
    name += div.getAttribute("name");
    var innerhtml = "";
    divs.forEach(function(div) 
      innerhtml += divshtml;
    );
    results = "<br> Div element" + name + "have innerHTML" + innerhtml + ".";

  );

  document.getElementById("demo").innerHTML = results;

<div id="container">
  <div class="parent" name="parentone">
    <div id="childone" style="height:10px">
      <div id="childtwo" style="background-color:red"></div>
    </div>
  </div>
  <div class="parent" name="parenttwo">
    <div id="childthree" style="height:10px"></div>
  </div>
</div>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

请指导我解决这个问题。

谢谢

【问题讨论】：

results = "<br> Div element" + name + "have innerHTML" + innerhtml +，这是由于尾随算术运算符导致的语法错误。当浏览器读取这一行时，一切都会停止。您确定您阅读了浏览器控制台日志吗？

我在电脑上打错了，但还是不行

【参考方案1】：

试试看：

function myFunction() 
  var divs = Array.prototype.slice.call(document.getElementById("container").querySelectorAll('*'));
  var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
  
  var temp = document.querySelectorAll("*");
  var divshtml = Array.prototype.slice.call(temp).innerHTML;
  // Loop over the array
  var results = "";
  var name = "";
  divsname.forEach(function(div)
    name += div.getAttribute("name");
  var innerhtml = "";
  divs.forEach(function(div)
    innerhtml += divshtml;
  );
    results = "<br> Div element" + name + "have innerHTML" + innerhtml;

  );

  document.getElementById("demo").innerHTML = results ; 

querySelectorAll 是 DOM 元素上的一种方法，它接受 CSS 选择器并返回匹配元素的静态 NodeList。

Array.prototype.slice.call 是将 NodeList（其作用类似于数组，但没有 Array.prototype 中的方法）转换为真实数组的一种方法。

【讨论】：

我需要分别从每个 class= parent 获取 innerHTML。如果添加： var temp = document.getElementsByClassName("wp-activ").querySelectorAll("*");不工作！

【参考方案2】：

因为document.getElementByClassName不是一个函数，你应该用id试试

  var divshtml = Array.prototype.slice.call(document.getElementById("parent").querySelectorAll('*'));

在 HTML 中：

  <div id="parent" name="parenttwo" >

【讨论】：

它应该只带类，不带id，知道其他可能的解决方案吗？

【参考方案3】：

按类你可以这样做，它会给你这个类节点之间的所有内部节点元素：

let divshtml = Array.prototype.slice.call(document.getElementsByClassName("randerHTML")[0].querySelectorAll('*'));

注意：它会返回 NodeList 而不是像 innerHTML 这样的字符串