javascript - 如何包含不使用 innerHTML 或 jQuery 的带有 textNode 的元素

Question

在不使用 innerHTML 的情况下将这个结构插入到 body 标记中，并对 3 个 li 元素使用 FOR 循环：

<div id="divEx1">
    <p>Langages basés sur ECMAScript :</p>
    <ul>
        <li>JavaScript</li>
        <li>JScript</li>
        <li>ActionScript</li>
    </ul>
</div>

我已经创建了元素

with 是文本节点和 ul 元素，但我遇到了 li 元素的问题。我在名为 eLi 的变量中添加了一个 document.createElement("li")，然后使用 document.querySelector("ul").appenChild(eLi) 创建了一个 for (i = 0; i < 3; i++) 循环，一个开关，用于将适当的 document.createTextNode() 放入名为 texteLi 的变量中，最后放入 document.querySelector("li").appendChild(texteLi)

var eLi = document.createElement("li");
for (i = 0; i < 3; i++) {
document.querySelector("ul").appendChild(eLi);
switch (i) {
    case 1:
        texteLi = document.createTextNode("Javascript");
    case 2:
        texteLi = document.createTextNode("JScript");
    case 3:
        texteLi = document.createTextNode("Actionscript");

    document.querySelector("li").appendChild(texteLi);
}
}

这是我的结果：

https://ibb.co/Kj5PGKF

我不明白为什么会有一个 CSS 伪类 ::marker

标签： javascriptdom

Answer 1

您有正确的方法，但您没有<li>在上面的代码中创建 3 个元素，而只是一个。此外，您正在查询<ul>循环的每次迭代，您不需要这样做。此外，在这里使用 switch 语句可能看起来很方便，但是您的语法错误并且有更好的方法。由于您已经在使用 for 循环，因此我们只需遍历所需文本内容的数组并使用索引来注入我们的文本。与您的代码风格保持一致，生成的代码可能如下所示：

var textArray = ["Javascript","JScript","Actionscript"]    
var eU = document.querySelector("ul")
for (i = 0; i < 3; i++) {
  var eLi = document.createElement("li")
  var textNode =  document.createTextNode(textArray[i]);
  eLi.appendChild(textNode)
  eU.appendChild(eLi)
}

在您的控制台中尝试，但创建<ul>而不是选择它，您将看到您想要的结果：

var textArray = ["Javascript","JScript","Actionscript"]    
var eU = document.createElement("ul")
for (i = 0; i < 3; i++) {
  var eLi = document.createElement("li")
  var textNode =  document.createTextNode(textArray[i]);
  eLi.appendChild(textNode)
  eU.appendChild(eLi)
}
console.log(eU)