Question

我有一个以下脚本，只返回附加div＃main的“h”字母。但我想将所有这个数组元素追加到main。如何在打印每个字母时创建断裂线？

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

Answer 1

您需要在for循环中追加内容，例如

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>

Answer 2

您不需要一直创建新元素，在为 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

Answer 3

我试过这种方式。

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

将数组附加到div

3 个答案: