javascript - 将数组附加到 div

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>