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

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 中添加一些内容，在第二个 div 中添加 2 个内容，在第三个和第四个 div 中每个仅添加一个内容。

像这样的结构:

• div1
• div2
  • 已发送1
  • 已发送2
• div3
  • 已发送3
• div4
  • 已发送2
• 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 元素；