Javascript 添加到<；时包括名称属性；ol>；

我在一个有动态列表的网站上工作，我希望能够访问列表中的各个元素

使用

appendChild（）

时，是否有方法为每个元素添加名称

这是我的职责：

function addOrder(theName, thePrice) {
    var li = document.createElement("li");
    var t = document.createTextNode(theName);
    li.appendChild(t);
    document.getElementById("cart").appendChild(li);
}

function addOrder(theName, thePrice) {
  // It's neater to put your DOM elements in variables at the top of the function
  var cart = document.getElementById("cart");

  var li = document.createElement("li");

  // Add the text inside the `li` element:
  li.textContent = theName;

  // Add a data attribute with name of data-name and value of theName:
  li.dataset.name = theName;

  // Append the `li` element to the `#cart` using the variable we defined at the top of the function:
  cart.appendChild(li);
}

---

当然

给你：

==使用ES6更新==

function addOrder(theName, thePrice) {
   // Select your `ul` element
   const list = document.querySelector("#cart");
   // Create `li` element
   const li = document.createElement("li");
   // Add your dynamic HTML to the `li`
   li.innerHTML = theName;
   // Append your `li` to your `ul`
   list.appendChild(li);
}

---

你有什么担心吗？请随意评论

您的意思是为每个元素添加一个名称或数据，以便稍后在JS中访问它吗？如果是这样，则需要使用dataset属性设置的数据属性

function addOrder(theName, thePrice) {
  var li = document.createElement("li");

  // Add a data attribute with name of data-name and value of theName:
  li.dataset.name = theName;

  var t = document.createTextNode(theName);
  li.appendChild(t);
  document.getElementById("cart").appendChild(li);
}

在未来的代码中，您现在可以使用以下内容查找具有特定名称的列表项：

document.queryselectoral（“[data name='some name']”）或您可以获取所有列表项并对其进行筛选：

const listItems = document.querySelectorAll("#cart li");
const nameIWantToFind = 'some name';
const foundName = Array.from(listItems).filter(item => item.dataset.name === nameIWantToFind);

另外，正如其他人所说，您不需要使用
createTextNode
。您可以改用
textContent
。其他人则建议使用
innerHTML
，这会起作用，但如果您只计划插入文本，则不需要使用，而且
textContent
的性能应该稍好一些。下面是重写函数的方法：

function addOrder(theName, thePrice) {
    var li = document.createElement("li");
    var t = document.createTextNode(theName);
    li.appendChild(t);
    document.getElementById("cart").appendChild(li);
}

function addOrder(theName, thePrice) {
  // It's neater to put your DOM elements in variables at the top of the function
  var cart = document.getElementById("cart");

  var li = document.createElement("li");

  // Add the text inside the `li` element:
  li.textContent = theName;

  // Add a data attribute with name of data-name and value of theName:
  li.dataset.name = theName;

  // Append the `li` element to the `#cart` using the variable we defined at the top of the function:
  cart.appendChild(li);
}

li.name='nameHere'
您可能应该使用
li.innerHTML=theName当然，您现在正在处理无效的HTML。。。因为name属性（技术上）仅对