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

Posted 2023-02-22

【中文标题】如何使用 JavaScript 将内容添加到 html 正文？

【英文标题】：How do I add content to html body using JavaScript?

【发布时间】：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

【参考方案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)

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