将数组追加到div

我有一个以下脚本，它只向附加div＃main返回“h”字母。但我想追加所有这个数组元素为主。当我打印每一封信时，如何创建分隔线？将数组追加到div

<div id="main"></div> 

<script> 
    function for_array(divname, myarray) { 
     for (var i = 0; i < myarray.length; i++) { 
      text = document.createTextNode(myarray[i]); 
     } 
     return document.getElementById(divname).appendChild(text); 
    } 
    for_array("main", ['f', 't', 'tr', 'h']); 
</script>

来源

2017-07-16 Отгонбаяр Ламжав

尝试'文本= document.createTextNode（myArray的[I] + '
'）;' – stephenmuss

这将插入
作为文本元素，W/O被解释为HTML :) – lustoykov

您需要内追加的内容进行循环，这样

for (let i = 0; i < myarray.length; i++) { 
    const text = document.createTextNode(myarray[i]); 
    const lineBreak = document.createElement('br'); 
    document.getElementById(divname).appendChild(text) 
    document.getElementById(divname).appendChild(lineBreak); 
}

在这种情况下，你已经证明只有最后一个元素添加，因为for循环简单地迭代，没有追加。只有在完成后才会追加最后一个字符。还要注意，这里创建了一个<br />元素，并在字符后面添加元素以插入换行符。

这是一个完整的工作示例

function for_array(divname, myarray) { 
 
    for (var i = 0; i < myarray.length; i++) { 
 
    const text = document.createTextNode(myarray[i]); 
 
    const lineBreak = document.createElement('br'); 
 
    document.getElementById(divname).appendChild(text) 
 
    document.getElementById(divname).appendChild(lineBreak); 
 
    } 
 
} 
 

 
for_array("main", ['f', 't', 'tr', 'h']);

<div id="main"></div>

来源

2017-07-16 10:53:18 lustoykov

我在JavaScript的新手。 “让”字是什么意思？我如何在每个数组元素中添加breakline？ –

看到我编辑的答案 – lustoykov

你不需要建立新的元素的时候，指定的字符串时，的innerHTML，它就会自动解析：

document.getElementById(divname).innerHTML=myarray.join("<br>");

这是发生了什么：

['f', 't', 'tr', 'h'] 
/* join with <br> => */ 
'f<br>t<br>tr<br>h' 
//assigned to DOM, <br> gets parsed to a line break: 
f 
br 
tr 
h

来源

2017-07-16 11:03:09

感谢但阅读有关innerHTML比appendchild慢。 https://gist.github.com/oliverfernandez/5619180看到这个链接 –

@ОтгонбаярЛамжавim在循环中不使用innerHTML ...使用.join更快，然后遍历数组，这应该使整个事情快得多 –

我试过这样。

$(function(){ 
    function for_array(divname, myarray) { 
     $.each(myarray, function(index, val) { 
     $('#main').append(val+"<br/>"); 
     }); 
    } 
    for_array("main", ['f', 't', 'tr', 'h']); 
    })

来源

2017-07-16 11:15:12 whoami

你可能不会回答jquery纯js问题 –

将数组追加到div

回答

相关问题