HTML元素未在屏幕上呈现项目[重复]

Posted 2023-02-14

【中文标题】HTML元素未在屏幕上呈现项目[重复]

【英文标题】：HTML elements not rendering the items on screen [duplicate]

【发布时间】：2022-01-16 06:01:36

【问题描述】：

javascript innerhtml 正在工作，因为我可以在我的开发人员工具控制台日志中看到它，但它不会在我的屏幕上呈现项目

 const textBox = document.getElementsByClassName("container1");
 const button = document.getElementsByClassName("submit");
 const textInput = document.getElementsByClassName("textinput");
 let items = ["yam", "apple", "veggies", "milk"];
 console.log(textInput);

    /*this section below is just to render out the items in the items arrays on my screen*/



for (let i = 0; i<items.length; i++) 
    textBox.innerHTML += `<p>$items[i]</p>`;
    textBox.textContent += items[i];
    console.log(textBox.innerHTML);

【问题讨论】：

设置 textContent 用文本替换所有 HTML。请改用textBox.append(Object.assign(document.createElement("p"), textContent: items[i] ), items[i]);。但更重要的是，HTMLCollections 和 NodeLists 既没有 textContent 属性也没有 innerHTML 属性。

【参考方案1】：

你需要在innerHTML和textContent中传递字符串。像这样：

textBox.innerHTML += `<p>$items[i]</p>`
textBox.textContent += `$items[i]`

【讨论】：

这不是他/她已经在做的事吗？

他/她编辑问题的第一个变体。