javascript - 有没有办法在添加时仅使用带有数字索引的 javascript 添加 DOM 元素？

Question

我无法找到使用文本节点添加 DOM 元素并仅使用 javascript 在节点中添加数字索引的任何解决方案。

我试过使用 if..else 和 for 循环，但它们都不起作用。

function addElement() {
    var para = document.createElement("p");
    var add = document.createTextNode("This is newly added. ");
    para.appendChild(add);
    var element = document.getElementById("div1");
    element.appendChild(para);
}

标签： javascript

Answer 1

您可以在p元素内附加一个label元素，其中p的当前长度作为label的文本：

function addElement() {
  var length = document.querySelectorAll('p').length;
  var para = document.createElement("p");
  var add = document.createTextNode("This is newly added. ");
  var label = document.createElement("label");
  label.textContent = length + ' ';
  para.appendChild(label);
  para.appendChild(add);
  var element = document.getElementById("div1");
  element.appendChild(para);
}
document.getElementById('createElement').addEventListener('click',addElement);

<button type="button" id="createElement">Create Element</button>
<div id="div1"></div>