javascript - 如何在元素中添加元素？(ES6)

Question

我正在尝试使用以下方法添加元素：

let el = `<div></div>`;
document.body.appendChild(el);

我注意到它el在 console.log 中显示为“字符串”。我应该通过添加元素createElement吗？

代码：

let topPos = (Math.random() * 100) + '%'
let leftPos = (Math.random() * 100) + '%'
let bubbleMd = `
    <div class="bubble bubble-md"></div>
`;
let layer = document.getElementsByClassName('layer3')

layer.appendChild(bubbleMd).setAttribute(
    'style',`top: ${topPos}; left: ${leftPos};`
);

标签： javascripthtmlecmascript-6

Answer 1

a) 是的，您需要使用 createElement 因为 appendChild 需要一个 HTMLElement 而不是字符串，b) layer 是一个节点列表，所以没有 appendChild 方法

所以：

let topPos = (Math.random() * 100) + '%'
let leftPos = (Math.random() * 100) + '%'
let bubbleMd = createElemnt('div');
bubbleMd.classList.add('bubble', 'bubble-md');
bubbleMd.style=`top: ${topPos}; left: ${leftPos};`;
let layer = document.getElementsByClassName('layer3')[0]; // note the [0]
layer.appendChild(bubbleMd);