如何使用 JavaScript 将内容添加到 html 正文？答案

【问题标题】：How do I add content to html body using JavaScript?如何使用 JavaScript 将内容添加到 html 正文？
【发布时间】：2021-03-06 02:31:07
【问题描述】：

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

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 个小时一直在研究这个问题，但似乎没有弄清楚

【问题讨论】：

除了未定义的ul，您的代码按原样工作，所以我猜员工列表中缺少一些名称或其他地方有错误：codesandbox.io/s/zen-hoover-w8v6i?file=/src/index.js

标签： javascript html arrays dom append

【解决方案1】：

我不得不彻底改变你的 js 代码的逻辑。

有必要吗？

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

let name_mans = document.querySelectorAll('.name');

Array.from(name_mans).forEach(function(name_man, i) {
  name_man.addEventListener('click', function() {
  
  console.log(names[i].role);
   
  });
});

<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>

【讨论】：

【解决方案2】：

您的代码似乎在 sn-p 中运行。刚刚添加了 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)

&lt;div id="container"&gt; &lt;/div&gt;

【讨论】：