javascript - Javascript 动态元素创建导致 HTML 中的阴影内容

Question

我在 javascript 中使用以下函数在类中创建了一个类和元素，并使用 appendchild 函数将其添加到另一个类中。

function createClass(menu)
{
                console.log('class entered');
                var newNode = document.createElement('div');
                newNode.className = 'item';
                
                
                var input = document.createElement('input');
                input.setAttribute("type","checkbox");
                input.setAttribute("id",menu);
                input.innerText=menu;
                var label = document.createElement('label');
                label.setAttribute("for", menu);
                label.innerText=menu;

                input.appendChild(label);
                newNode.appendChild(input);
               return newNode;

        }

但是，内容不显示在 html 页面中。类已添加。当 html 的正文显示在控制台中时，该类被添加到正文中，但在内部文本之前，它显示“影子内容（用户代理）”。

如何使它们可见？

标签： javascripthtml

Answer 1

您已经创建了新的 DOM 元素，但从未真正将它们附加到当前文档。缺少的部分是将新的 DOM 元素添加到文档中：

document.body.appendChild(createClass('hello'))