添加到 <ol> 时包含名称属性

Question

我正在开发一个包含动态列表的网站，我希望能够访问列表中的各个元素。

有没有办法在使用appendChild()时为每个元素添加名称？

这是我的功能：

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

Answer 1

一定！

给你：

== 更新为 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);
}

有什么顾虑吗？ 欢迎留言评论！

Answer 2

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

设置它

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.querySelectorAll("[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) {
  // 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);
}

添加到 <ol> 时包含名称属性

Include a name attribute while adding to an <ol>

javascript

appendchild