Javascript 向div类的子元素添加字符串_Javascript_Getelementsbyclassname

Javascript 向div类的子元素添加字符串

javascript

Javascript 向div类的子元素添加字符串,javascript,getelementsbyclassname,Javascript,Getelementsbyclassname,我有以下脚本，它没有执行我希望它执行的操作： <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 > </

我有以下脚本，它没有执行我希望它执行的操作：

<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 
str 
adsa 
str 
sad 
str 
sada 
str

因此，对于每个子类，应该添加

str

。如何实现这一点？

我建议您使用

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 + ' ';
    }
}

函数myFunction（）{
// ...
var doc=document.queryselectoral（“.test span”）；
var-str='str'；
对于（变量i=0；i


更新
您已将span
更改为div
，因此，如果您只需要div
s，则可以使用doc=document.queryselectoral（“.test div”）

一般来说，要获取所有子级，可以使用doc=document.querySelector（.test”）。子级使用queryselectorall
&以div及其子跨度为目标。在您的代码doc[i]中，innerHTML
将给出子span元素，但假定变量str将添加到textContent中

函数myFunction（）{
//一个新变量，它将连接所有文本
var newString=''
var MyDiv2=document.getElementById（'DIV2'）；
var doc=document.queryselectoral（“.test span”）；
var str='testString'；
对于（变量i=0；i


sdas
adsa
悲哀的
萨达




单击按钮更改第一个列表项（索引0）的文本
试试看
给你
获取一个新变量，即输出，在循环时将结果推送到该数组中。循环完成后，加入数组。请注意，我现在正在div
上使用id选择器


sdas
adsa
悲哀的
萨达




单击按钮更改第一个列表项（索引0）的文本
试试看
函数myFunction（）{
var MyDiv2=document.getElementById（'DIV2'）；
var items=document.getElementById（“测试”）.children；
var-str='str'；
var输出=[]；
对于（变量i=0；i${str}
`）；
}
MyDiv2.innerHTML=output.join（“”）；
}

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 + ' ';
    }
}