时间戳

首页 > 解决方案 > 重复标签而不产生更多变量

javascript - 重复标签而不产生更多变量

问题描述

所以简而言之，我想添加一个简单的 JavaScript 代码来添加无序列表，并在其中添加 4 个具有不同文本的列表。我可以用简单的方法做到这一点，但我想知道是否可以<li>在更改内部文本的同时复制标签而不创建更多变量。

const ul = document.createElement('ul')
const li = document.createElement('li')
const a = ['one','two',"three","four"]

const group = document.body.insertAdjacentElement('afterbegin' , ul)
ul.appendChild(li)
li.textContent = a[0]

标签： javascript

解决方案

迭代a数组并在其中创建元素。

如果您想避免在不需要时创建变量，可以使用appendChild（返回附加元素）：

const ul = document.body.appendChild(document.createElement('ul'));
for (const item of ['one','two',"three","four"]) {
  ul.appendChild(document.createElement('li')).textContent = item;
}

另一种方法：

document.body.appendChild(document.createElement('ul'))
  .innerHTML = ['one','two',"three","four"]
    .map(t => `<li>${t}</li>`)
    .join('');

也就是说，如果它们使代码更具可读性，最好不要害怕创建变量。

推荐阅读