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

因此，对于每个子类，应添加str。我怎样才能做到这一点？

Answer 1

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

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，因此如果您只需要doc = document.querySelectorAll(".test div")，则可以使用div。

为了让所有孩子一般，您可以使用doc = document.querySelector(".test").children。

Answer 2

使用querySlectorAll＆amp;瞄准div及其子跨度。在你的代码doc[i].innerHTML中将给出子span元素，但是变量str被假设添加到textContent

＆＃13;

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


}

＆＃13;

<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>

＆＃13;

Answer 3

你走了。

获取一个新变量，即输出，在循环时将结果推送到此数组中。完成循环后，加入数组。请注意，我现在正在使用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类的子元素

3 个答案: