将字符串添加到 div class 的 child 个元素

Question

我有以下脚本，它没有按照我的要求执行：

<html>
<body>

<div class="test">
 <div class="one">sdas</div >
 <div class="two">adsa</div >
 <div class="three">sad</div >
 <div class="four">sada</div >
</div>
<br /><br /><br />
<div id="DIV2">
</div>

<p>Click the button to change the text of the first list item (index 0).</p>

<button onclick="myFunction()">Try it</button>

<script>

function myFunction() {
    var MyDiv2 = document.getElementById('DIV2');
    var doc = document.getElementsByClassName("test");
    var str = 'str';

    for (var i = 0; i < doc.length; i++) {

        MyDiv2.innerHTML = doc[i].innerHTML + str;
    }
}

</script>

</body>
</html>

按下按钮后，输出如下：

sdas 
adsa 
sad 
sada


sdas 
adsa 
sad 
sada 
str

但是，我想要以下输出：

sdas
adsa 
sad 
sada


sdas 
str 
adsa 
str 
sad 
str 
sada 
str

所以对于每个 child class，应该添加 str。我怎样才能做到这一点？

Answer 1

我建议您像这样使用 querySelectorAll 更改 doc 变量选择器：

function myFunction() {
    // ...
    var doc = document.querySelectorAll(".test span");
    var str = 'str';

    for (var i = 0; i < doc.length; i++) {
        MyDiv2.innerHTML += doc[i].innerHTML + ' ' + str + ' ';
    }
}

更新

您已从 span 更改为 div，因此如果您只想要 div，则可以使用 doc = document.querySelectorAll(".test div")。

一般获取所有子项，可以使用doc = document.querySelector(".test").children.

Answer 2

使用 querySlectorAll 并定位 div 及其子跨度。在您的代码中 doc[i].innerHTML 将提供子 span 元素，但假设变量 str 添加到 textContent

function myFunction() {
  // a new variable which will be concatenation of all the text
  var newString = '' 
  var MyDiv2 = document.getElementById('DIV2');
  var doc = document.querySelectorAll(".test span");
  var str = 'testString';
  for (var i = 0; i < doc.length; i++) {
   // trim is used to remove any white space
    newString += doc[i].textContent.trim() + str + ' ';
  }
  MyDiv2.innerHTML = newString


}

<div class="test">
  <span class="one">sdas</span>
  <span class="two">adsa</span>
  <span class="three">sad</span>
  <span class="four">sada</span>
</div>
<br /><br /><br />
<div id="DIV2">
</div>

<p>Click the button to change the text of the first list item (index 0).</p>

<button onclick="myFunction()">Try it</button>

Answer 3

给你。

取一个新的变量即output，循环的时候把结果压入这个数组。完成循环后，加入数组。请注意，我现在正在 div 上使用 id 选择器。

<body>

<div class="test" id="test">
 <div class="one">sdas</div >
 <div class="two">adsa</div >
 <div class="three">sad</div >
 <div class="four">sada</div >
</div>
<br /><br /><br />
<div id="DIV2">
</div>

<p>Click the button to change the text of the first list item (index 0).</p>

<button onclick="myFunction()">Try it</button>

<script>

function myFunction() {
    var MyDiv2 = document.getElementById('DIV2');
    var items = document.getElementById("test").children;
    var str = 'str';
    var output = [];
    for (var i = 0; i < items.length; i++) {
        output.push(`${items[i].innerHTML} <br /> ${str} <br />`);
    }
    MyDiv2.innerHTML = output.join("");
}

</script>

</body>

将字符串添加到 div class 的 child 个元素

Adding string to child elements of div class

javascript

getelementsbyclassname