如何使用appendChild将两个<a>元素放入同一个创建的div中？

嗨，我明白你的困扰了——appendChild()确实只能接受单个元素作为参数，所以你没法一次性把两个<a>元素传进去。别担心，有好几种简单实用的方法可以解决这个问题，我给你详细说说：

方案1：多次调用appendChild() #

最直接的方式就是分开调用appendChild()，每次给容器添加一个元素，代码修改起来也很简单：

let view = this.view as Nullable<HTMLElement>;
let link_1 = document.createElement('a');
let link_2 = document.createElement('a');
let link_container = document.createElement('div');
link_container.setAttribute('style', 'display: flex;');
// 分别追加两个链接元素
link_container.appendChild(link_1);
link_container.appendChild(link_2);
view?.appendChild(link_container);

方案2：使用Element.append()（推荐） #

append()是appendChild()的升级版本，它支持同时传入多个元素（甚至可以传文本节点），用法更灵活，代码也更简洁：

let view = this.view as Nullable<HTMLElement>;
let link_1 = document.createElement('a');
let link_2 = document.createElement('a');
let link_container = document.createElement('div');
link_container.setAttribute('style', 'display: flex;');
// 一次性追加多个元素
link_container.append(link_1, link_2);
view?.appendChild(link_container);

小提示：append()和appendChild()的区别在于，append()不会返回被添加的元素，而appendChild()会，但在你的这个场景里，这个差异几乎不影响使用。

方案3：用DocumentFragment批量添加（适合多元素场景） #

如果以后需要添加更多元素，推荐用DocumentFragment先把所有元素收集起来，再一次性加入容器。这样能减少DOM操作的次数，提升页面性能：

let view = this.view as Nullable<HTMLElement>;
let link_1 = document.createElement('a');
let link_2 = document.createElement('a');
let link_container = document.createElement('div');
link_container.setAttribute('style', 'display: flex;');
// 创建文档片段用来暂存元素
const fragment = document.createDocumentFragment();
fragment.appendChild(link_1);
fragment.appendChild(link_2);
// 一次性将片段内的所有元素加入容器
link_container.appendChild(fragment);
view?.appendChild(link_container);

这几种方法都能完美解决你的问题，其中append()是最省心的，推荐优先使用这个方案~

内容的提问来源于stack exchange，提问作者yahvoc