应用脚本追加两个列表 - Javascript (1)

📌 相关文章

📜 应用脚本追加两个列表 - Javascript (1)

📅 最后修改于: 2023-12-03 14:54:09.587000 🧑 作者: Mango

应用脚本追加两个列表 - Javascript

本文介绍如何使用 JavaScript 将两个列表合并成一个新的列表，并将其追加到文档中。

准备工作

我们先创建两个空列表，并在 HTML 文档中将它们渲染出来。

<ul id="list1"></ul>
<ul id="list2"></ul>

接着，我们使用 JavaScript 分别获取这两个列表。

const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");

合并列表

为了将这两个列表合并成一个，我们可以使用 JavaScript 的 concat() 方法，将两个列表组合在一起。

const mergedList = [].concat(Array.from(list1.children), Array.from(list2.children));

这里的 Array.from() 方法将每个列表元素转换为数组，然后我们将它们组合在一起。

追加列表

现在我们已经将两个列表合并成了一个数组，接下来我们需要将它渲染到文档中。为了做到这一点，我们可以使用 JavaScript 的 forEach() 方法遍历合并后的数组，然后将每个元素追加到新的列表中。

const newList = document.createElement("ul");

mergedList.forEach(function(item) {
  const li = document.createElement("li");
  li.innerText = item.innerText;
  newList.appendChild(li);
});

document.body.appendChild(newList);

这里，我们创建了一个新的列表元素，并使用 forEach() 方法遍历 mergedList 数组。对于每个数组元素，我们创建一个新的列表项（<li>），并将它的 innerText 属性设置为原始的列表项的 innerText 属性。最后，我们将新列表项追加到新列表中，并将新列表追加到文档中的 <body> 元素中。

完整代码

const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");

const mergedList = [].concat(Array.from(list1.children), Array.from(list2.children));

const newList = document.createElement("ul");

mergedList.forEach(function(item) {
  const li = document.createElement("li");
  li.innerText = item.innerText;
  newList.appendChild(li);
});

document.body.appendChild(newList);

这段代码将两个列表合并成一个新的列表，并将其追加到文档中。如果你想要修改代码以适应你的应用场景，请根据文档对代码进行调整。