如何使用appendChild将两个不同的元素放入一个div中？

Question

我查阅了其他与此相似的问题，但遗憾的是没有找到适用于自己的解决方案。 我想在创建的 div 元素内放置两个 a 元素，并使用 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;');

const cont = link_container.appendChild(link_1, link_2);

view?.appendChild(cont);

我希望您能提供一个可行的解决方案。

- yahvoc

---

只需调用 appendChild 一次，每个（= 2 次）。 - ControlAltDel

首先，您有一个打字错误。view.appendChild(cont); 其次，是的，appendChild()只接受一个参数，因此您只需调用它两次（不需要将其绑定到变量）。 - Jacopo

Answer 1

使用 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;');

const cont = link_container.append(link_1, link_2);

- user19831853

---

append 不会返回任何东西。 - gre_gor

不，你可以在文档中看到append和appendChild之间的差异：https://developer.mozilla.org/en-US/docs/Web/API/Element/append - user19831853

根据您提供的文档：“Element.append（）没有返回值”。 - gre_gor

Answer 2

创建一个数组来存储您想要创建的链接数量变量，然后创建循环以在单个div上附加子元素。

这将是一种动态方法，您可以在单个父级中附加多个子元素。

像这样：

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 links = [link_1, link_2];

links.forEach(link => {
   link_container.appendChild(link);
})

view?.appendChild(cont);

- SandyKrish