Question

我的目标是在appendChild（图片）之后显示appendChild（详细信息），但它不会显示在浏览器中。

document.getElementById("myBtn2").addEventListener("click", hey);

function hey(){     
    for (i = 1; i < radio.length; i++){
        f = radio[i].image ;

        var item = document.createElement('div');
        item.id = "box";
        item.className = "dell";
        item.style.height = "140px";
        detail = document.createElement('div');
        detail.className = "space";
        image = document.createElement('img');
        image.id = "pic";
        image.className = "dell3";
        image.setAttribute("src", f);

        document.getElementById('case').appendChild(item).appendChild(image).appendChild(detail);                                   
    }
}

Answer 1

appendChild()返回附加的节点。它的思维方式不是 chainable 。在您的代码中，<reference name=”head”> <action method=”addLinkRel”> <rel>canonical</rel> <href>https://example.com/page-name.html</href> </action> </reference>附加到item，'case'附加到image，item附加到detail。由于image是不应包含子项的image元素，因此不会显示<img>。

解决方案是将每个项目分别附加到文档片段，然后将文档片段附加到案例中。

detail

请注意，您可能也希望在其他变量赋值上使用var关键字，否则您将隐式地为每个变量赋值创建全局变量。我已将这些添加到我所做的示例更改中。您可能还需要进行其他优化，例如每次循环时都不执行var frag = document.createDocumentFragment(); var item = frag.appendChild(document.createElement('div')); item.id = "box"; item.className = "dell"; item.style.height = "140px"; var detail = frag.appendChild(document.createElement('div')); detail.className = "space"; var image = frag.appendChild(document.createElement('img')); image.id = "pic"; image.className = "dell3"; image.setAttribute("src", f); document.getElementById('case').appendChild(frag);查找（您可以将其存储为循环外的var）。

我需要在dom div中添加第三个appendchild（）

1 个答案: