javascript - 如何将数组元素附加到 DOM？

Question

我在向 HTML 中添加元素时遇到问题。我认为我的问题在于我对 HTML 的理解，但我不确定。这是我的Javascript:

<div class="console">
    <div id="console_data">
        <p class="console_text"> </p>
    </div>
</div>

让我解释一下这是在做什么，或者至少我正在尝试做什么。控制台类只创建一个黑色矩形，其中会有一些白色文本，这就是 console_text 的用途。这是我将内容附加到 console_data 的 javascript:

var consoleData = ["Hello World"]
var consoleInfo = document.getElementById('console_data')

for (var i = 0; i < consoleData; i++) {
    var anchor = document.createElement('a')
    var value = consoleData[i]
    anchor.href = value
    consoleInfo.appendChild(anchor)
}

我的印象是这会将文本 Hello World 附加到我创建的黑框内，但它只是显示空的黑框。我的 console_data 标签是否有必要？我应该尝试将数据附加到哪里？

Answer 1

您应该检查是否 i小于 consoleData的长度，因为您正在遍历它:

var consoleData = ["Hello World"]
var consoleInfo = document.getElementById('console_data')

for (var i = 0; i < consoleData.length; i++) {
    var anchor = document.createElement('a')
    var value = consoleData[i]
    anchor.href = value
    anchor.innerHTML = value
    consoleInfo.appendChild(anchor)
}

<div class="console">
    <div id="console_data">
        <p class="console_text"> </p>
    </div>
</div>