使用JS创建DOM元素，其中包含更多元素

Question

我有一些任务要做，我想如何做得更容易。我必须用一些类创建(使用JS(div元素，在这个元素中我想创建另外两个元素(img src和button(，但我不知道如何做到

我可以这样做：

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

之后，我可以将它添加到HTML文档中，然后创建另一个元素(img src和button(，并将其添加到我之前创建的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);

Answer 2

是的，您可以使用Template文本在字符串中构建模板。但是，这个字符串不包含简单放置的元素实例；纯文本。这意味着要修改它们，必须将字符串解析为HTML。

可以使用Element.insertAdjacentHTML方法在文档中插入字符串。不要使用innerHTML，因为这会在附加到的元素中重新呈现HTML，并可能破坏与JavaScript中事件侦听器和选择器的绑定。

这是一个如何工作的例子。

const getTemplate = (src) => `
<div class="some-class">
<img src="${src}" alt="">
<button>Click me</button>
</div>
`;
const template = getTemplate('https://via.placeholder.com/150');
console.log(template);
document.body.insertAdjacentHTML('beforeend', template);

但是，如果你正在寻找最佳实践，那么就选择你最初的方法——考虑接受Maniraj Murugan的答案。