javascript - 使用 JS 创建包含更多元素的 DOM 元素

Question

我有一些任务要做，我正在考虑如何更轻松地完成它。 我必须使用一些类创建(使用 JS)div 元素，在这个元素内我想创建另外 2 个元素(img src 和按钮)，但我不知道该怎么做。

我可以这样做:

const newElement = document.createElement('div');
newElement.classList.add('someClass')

之后我可以将其添加到 HTML 文档中，然后创建另一个元素(img src 和按钮)并将其添加到我之前创建的 div 中，但是有没有更快的选项来创建它？

Answer 1

以与创建类相同的方式，您可以创建其他两个元素，例如 img 和 button 并制作适当的 src 和textContent 然后使用 appendChild() ，您可以将 img 和按钮附加到作为父 div 的 newElement ..

最后将新创建的 dom 元素附加到 document.body 中，

document.body.append(newElement);

代码片段如下，

const newElement = document.createElement('div');
newElement.classList.add('someClass');

const image = document.createElement('img');
image.setAttribute('src', 'https://via.placeholder.com/150');

const button = document.createElement('button');
button.textContent = 'Button';

newElement.append(image);
newElement.append(button);

console.log(newElement);

document.body.append(newElement);