如何在元素內添加元素？ （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};`
);

Answer 1

a）是的，您需要使用createElement，因為appendChild期望HTMLElement不是字符串，b）圖層是節點列表，因此沒有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);