javascript - 如何使用 JavaScript 将内容添加到 html 正文？

Question

当给定数组包含员工列表时

let names = [
  { firstName: 'John', lastName: 'Doe', DOB: '01Jan1970', role: 'cook' },
  { firstName: 'Mary', lastName: 'Jane', DOB: '11Sep2000', role: 'server' },
];

并且已经提供了#ul，

<ul id="container">
  <li>
    <a class="name">John Doe</a>
    <div class="age">41</div>
  </li>
  <li>
    <a class="name">Mary Jane</a>
    <div class="age">20</div>
  </li>
</ul>

单击员工姓名时，我需要返回员工的角色。这是我的代码

function findRoles(array) {

  const container = document.getElementById('container');

  for (let i = 0; i < array.length; i++) {
    const li = document.createElement('li'),
      a = document.createElement('a'),
      div = document.createElement('div');
      ul = document.createElement('ul');

    let user = array[i];

    a.innerText = user.firstName + ' ' + user.lastName;
    a.className = 'name';
    a.addEventListener("click", () => printRole(user))


    //div.className = "age";

    li.appendChild(a);
    li.appendChild(div);
    container.appendChild(li);
    
  }
  
}

这导致以下错误：

AssertionError: expected '<a class="name"></a>' to equal '<a class="name">John Doe</a>'

似乎<a class="name">缺少内容。在过去的 4 个小时里一直在研究这个问题，但似乎没有弄清楚

标签： javascripthtmlarraysdomappend

Answer 1

您的代码似乎在片段中工作。刚刚添加了 printRole 方法。

function printRole(usr) {
  console.log('Clicked on user: ', `${usr.firstName} ${usr.lastName}`, '; Role is ', usr.role);
}

function findRoles(array) {

  const container = document.getElementById('container');

  for (let i = 0; i < array.length; i++) {
    const li = document.createElement('li'),
      a = document.createElement('a'),
      div = document.createElement('div');
      ul = document.createElement('ul');

    let user = array[i];

    a.innerText = user.firstName + ' ' + user.lastName;
    a.className = 'name';
    a.addEventListener("click", () => printRole(user))


    //div.className = "age";

    li.appendChild(a);
    li.appendChild(div);
    container.appendChild(li);
    
  }
  
}

let names = [
  { firstName: 'John', lastName: 'Doe', DOB: '01Jan1970', role: 'cook' },
  { firstName: 'Mary', lastName: 'Jane', DOB: '11Sep2000', role: 'server' },
];

findRoles(names)

<div id="container"> </div>