从许多元素中获取InnerHTML

时间:2013-12-30 11:35:14

标签: javascript for-loop innerhtml

我的问题很简单,我仍然无法完成。我不知道我的代码究竟出了什么问题,这让我很不高兴。

我想要做的就是将InnerHTML文本放入带有hna ID的div元素中。

HTML:

<input type='button' value='test' onclick='tst()'>
  <div class='paragraphe'>
    <div class='bloc_agence'>
      <h3>wa7d</h3>
    </div>
  </div>
  <div class='paragraphe'>
  <div class='bloc_agence'>
    <h3>joj</h3>
  </div>
</div>
<div class='paragraphe'>
  <div class='bloc_agence'>
    <h3>tlata</h3>
  </div>
</div>
<div id='hna'></div>

使用Javascript:

a=document.getElementsByClassName('paragraphe').children.getElementsByClassName('bloc_agence').children.getElementsByTagName('H3');

function tst(){
    for(i=0;i<a.length;i++){
document.getElementById('hna').InnerHTML+=a[i].InnerHTML+'<br>';
    }}

我的直播jsfiddle

3 个答案:

答案 0 :(得分:2)

您只需要改进一些语法并使用querySelectorAll

a = document.querySelectorAll('.bloc_agence > h3');

function tst() {
    var str = '';        
    for (i = 0; i < a.length; i++) {
        str  += a[i].innerHTML + '<br>'; // Not InnerHTML it must be innerHTML
    }
 document.getElementById('hna').innerHTML = str;
}

Updated Fiddle

答案 1 :(得分:1)

for()循环之前,您获得的元素级别错误。您只想获取最外层元素的数组,然后遍历它们(.paragraphe):

function tst(){
    a = document.getElementsByClassName('paragraphe');

    str = '';
    for(i=0;i<a.length;i++){
       header = a[i].getElementsByTagName('h3')[0];
       str += header.innerHTML+'<br>';
    }
    document.getElementById('hna').innerHTML = str;  
}

JSFiddle

答案 2 :(得分:0)

尝试使用JQuery

    function tst(){
$('#hna').empty();
$('.bloc_agence h3').each(function(){
   var tex=$(this).text() 
   $('#hna').append(tex+'</br>');
});
}

DEMO