将新 HTML <li> 注入 HTML 的 JavaScript 函数 [重复]

Posted 2023-03-16

【中文标题】将新 HTML <li> 注入 HTML 的 JavaScript 函数 [重复]

【英文标题】：JavaScript function that injects new HTML <li> into the HTML [duplicate]

【发布时间】：2021-01-10 14:33:26

【问题描述】：

我正在尝试创建一个 javascript 函数，该函数允许我通过单击保存数组的最后一个元素（standbyWord 数组），然后将该保存的元素显示为 html <li>。

我已经设法更改了innerHTML，因此每次单击保存按钮时，standbyWord 数组中的最后一个元素都会保存在 savedWords 数组中。但是，我希望每次按下保存按钮时都会出现一个新的 <li> 以及该新保存的单词。

<div>
  <ul>
     <li id="listWord"></li>
  </ul>
</div>

let savedWords = [];

function saveWord()
      savedWords.push(standbyWord[standbyWord.length - 1]);
      document.getElementById('savedWordCount').innerHTML = savedWords.length;
      document.getElementById('listWord').innerHTML = savedWords;
    

【问题讨论】：

你试过html元素的appendChild()方法吗？ appendChild() 另外，您的示例代码不完整，请插入带有保存按钮和standbyWord 变量的完整示例。

【参考方案1】：

如果你想使用innerHTML，你需要知道这将替换标签的整个内部内容——就你的代码而言，你最终会得到一串单词BUT，如果你希望它们是在 li 标签内，您将在 li 内拥有 li 标签，而它们应该在 ul 或 ol 标签内。如果您将ul 元素更改为具有id="listword" 并删除li 标记，您可以这样做：

let savedwords = ["cat","dog", "rabbit", "horse", "donkey", "whale", "mouse"];

let lw = document.getElementById("listword");
lw.innerHTML = "<li>" + savedwords.join("</li><li>") + "</li>";

<div>
  <ul id="listword">
  
  
  </ul>

</div>

或者，您可以按照@JustAMicrobe 的建议进行操作，为新单词创建一个新的li 对象，然后使用appendChild 将其附加到ul 对象。