[[如何包括 具有textNode的元素，而无需使用innerHTML或jQuery

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>

我已经创建了元素

与is文本节点和ul元素，但是在使用li元素时遇到了麻烦。我在名为eLi的变量中添加了document.createElement（“ li”），然后使用document.querySelector（“ ul”）。appenChild（eLi）为（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

Answer 1

让我们先休息一下。我认为您需要在每种情况下都使用break;，在过去不使用它时我遇到了问题，此外，它有助于使您读取代码逻辑以进行调试。

Answer 2

不使用innerHTML node.textContent = text来设置节点的内容>

Answer 3

您具有正确的方法，但是您没有在上面的代码中创建3个<li>元素，而是仅创建一个。另外，您在循环的每个迭代中都查询<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)
}