javascript - 制作一个节点元素并附加它

Question

假设我正在创建一个节点

   element.pics.forEach((pic, i) => {
            var image = new Image();
            image.height = 180;
            image.classList.add('mt-2','rounded','mr-2', 'w-100');
            image.src    = pic;
            i++;

            if (i <= 2) {
                oHome.oImageRow1.appendChild(image);
            } else {
                oHome.oImageRow2.appendChild(image);
            }

            console.log(i);
        });

在将图像附加到 oImageRow 之前，我如何将它包装在一个带有 col 类的 div 中，我试过了

let html = `<div class="col"><img height="180" class="mt-2 rounded mr-2 w-100" src="${pic}"/></div>`;

并使用附加它

oHome.oImageRow1.appendChild(html);

但是我得到一个错误说

参数1不是节点类型

标签： javascript

Answer 1

你可以做

let html = document.createElement('div')
html.classList.add('col')
html.innerHTML = '<img height="180" class="mt-2 rounded mr-2 w-100" src="${pic}"/>'

oHome.oImageRow1.appendChild(html)

你只能附加 DOM 节点，你试图附加一个字符串。