Question

我有一组句子和单选按钮，我需要使用javascript函数在网页上显示。我还需要创建一些div来帮助我在网页上对这些句子进行可视化分组。我写了这个函数，我可以在下面的代码中显示句子和单选按钮，如下所示。我还指定了div：

var div1 = document.createElement("div");
div1.setAttribute("align","left");
div1.style.border = "1px solid #ccc";

var div2 = document.createElement("div");
div2.setAttribute("align","left");
div2.style.border = "1px solid #ccc";

var div3 = document.createElement("div");
div3.setAttribute("align","left");
div3.style.border = "1px solid #ccc";

var div4 = document.createElement("div");
div4.setAttribute("align","left");
div4.style.border = "1px solid #ccc";

var div5 = document.createElement("div");
div5.setAttribute("align","left");
div5.style.border = "1px solid #ccc";

var div6 = document.createElement("div");
div6.setAttribute("align","left");
div6.style.border = "1px solid #ccc";

var Sent1 = "Sentence 1 displays here";

var Sent2 = "Sentence 2 displays here";

var Sent3 = "Sentence 3 displays here";

div1.appendChild(div2);
div1.appendChild(div3);
div1.appendChild(div4);
div1.appendChild(div5);
div1.appendChild(div6);

div2.appendChild(Sent1);
div2.appendChild(Sent2);
div3.appendChild(Sent3);
div4.appendChild(Sent2);

return div1;

我期待看到的是页面上显示的6个不同的框（div），其中div2（页面上第二个最顶层的框）显示了2个句子（Sent1和Sent2），div3和div4有一个句子显示每个，而其余的div不包含任何文本。不幸的是，这不是显示的内容。我错过了什么？有人可以用正确的语法/方法帮助我吗？

Answer 1

如果我理解正确，这就是问题所在：

你想在6个不同的div中添加一些内容，在第二个中添加2个内容，在第三个和第四个中只添加一个内容。

喜欢这个结构：

DIV1
DIV2
- sent1
- sent2
DIV3
- sent3
DIV4
- sent2
DIV5
DIV6

如果这是正确的，那么您可以编辑代码来执行此操作：

    var div1 = document.createElement("div");
    div1.setAttribute("align","left");
    div1.style.border = "1px solid #ccc";
    // i add some height to show empty boxes
    div1.style.height = "30px";

    var div2 = document.createElement("div");
    div2.setAttribute("align","left");
    div2.style.border = "1px solid #ccc";

    var div3 = document.createElement("div");
    div3.setAttribute("align","left");
    div3.style.border = "1px solid #ccc";

    var div4 = document.createElement("div");
    div4.setAttribute("align","left");
    div4.style.border = "1px solid #ccc";

    var div5 = document.createElement("div");
    div5.setAttribute("align","left");
    div5.style.border = "1px solid #ccc";
    div5.style.height = "30px";

    var div6 = document.createElement("div");
    div6.setAttribute("align","left");
    div6.style.border = "1px solid #ccc";
    div6.style.height = "30px";

    var Sent1 = document.createElement("p");
    Sent1.innerHTML="Sentence 1 displays here";

    var Sent2 = document.createElement("p");
    Sent2.innerHTML="Sentence 2 displays here";

    var Sent3 = document.createElement("p");
    Sent3.innerHTML="Sentence 3 displays here";

    //it is not possible to append same child to different divs than duplicate the div to append multiple times
    var Sent4 = document.createElement("p");
    Sent4.innerHTML="Sentence 2 displays here";

    div2.appendChild(Sent1);
    div2.appendChild(Sent2);
    div3.appendChild(Sent3);

    //appendChild move divs not copied
    div4.appendChild(Sent4);

    document.body.appendChild(div1);
    document.body.appendChild(div2);
    document.body.appendChild(div3);
    document.body.appendChild(div4);
    document.body.appendChild(div5);
    document.body.appendChild(div6);

就像你在上面的代码中看到的那样，我添加了一些注释，因为你试图以错误的方式使用appendChild：

appendChild 仅将一些现有的dom节点从一个地方移动到另一个地方，但不会复制到另一个地方;
在页面上显示空框 div我向div添加了一些高度但这仅用于可视化div，如果没有任何内容;
我将孩子的div（div1到div6）像孩子一样附加到body元素，但你可以根据你的需要将div添加到任何dom元素;

创建div并通过javascript函数添加文本

1 个答案: