のdivクラス

の子要素に文字列を追加し、私はそれが何をしたいのかやっていない次のスクリプトを、持っている：の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 
adsa 
sad 
sada 
str

を strべき、それぞれの子クラスのためので

sdas 
adsa 
sad 
sada 


sdas 
str 
adsa 
str 
sad 
str 
sada 
str

：

しかし、私は次のような出力を持っているしたいと思います追加される。どうすればこれを達成できますか？

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

更新

だけdivをしたい場合は、doc = document.querySelectorAll(".test div")を使用できるようにするには、divにspanから変更：

出典

2017-12-21 user2237168

私はあなたがそのようなquerySelectorAllを使用してdoc変数セレクタを変更することをお勧めs。

一般的にすべての子供を取得するにはdoc = document.querySelector(".test").childrenを使用できます。

出典

2017-12-21 08:39:25

querySlectorAll & divとその子スパンを対象にしてください。あなたのコードではdoc[i].innerHTMLは、子スパン要素を与えるだろうが、変数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>

出典

2017-12-21 08:41:26 brk

。 – rach8garg

に追加するとしています。

新しい変数、つまり出力を取ってループしながら結果をこの配列にプッシュします。ループを終了したら、配列に参加します。私はidセレクタをdivに使用しています。出力に必要な書式が見つからない

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

出典

2017-12-21 09:22:42 rach8garg

答えて

関連する問題