使用 JS 函数在 1 个 Div 内创建 2 个子 Div？

Question

我正在构建一个网络应用程序，但遇到了问题。我正在构建一个闪存卡应用程序，它显示带有单词的卡片，稍后我将添加 CSS 以进行翻转过渡以显示该单词的定义。目前我正在生成一个 2 个新的 div（1 个用于单词，一个用于定义），都在“div1”内。 Div1 是一个全宽容器，用于容纳所有卡片。

我正在尝试让我的函数在“Div1”中创建一个名为“Cardcontainer”的 div，并且在该 div 中有 2 个子 div（1 个用于单词，1 个用于定义）。我不知道该怎么做。我能够生成 2 个 div 并将它们彼此相邻放置，但是为了让我的 css 技巧起作用，我需要 2 个 div（单词和定义）在（并填充 100% 的）“Cardcontainer”div 中，即每次点击“创建卡片”按钮时都会生成。

我需要这样做的原因是因为我需要将 2 个 div（单词和定义）相互重叠放置，以使 css 技巧起作用。因为我创建了 2 个单独的 div，但它们没有在“Cardcontainer”中，所以我无法使这个 css 技巧起作用。

这里是 css 教程的链接...https://www.youtube.com/watch?v=OV8MVmtgmoY

按钮的当前结构 在 Div1 中创建 2 个 div（ word 和 def ），这是一个容器，仅用于保存所有卡片并将它们与其他页面内容分开。

我需要的按钮 创建 1 个名为“Cardcontainer”的 div，其中包含 2 个 div（ word 和 def ）。这个“Cardcontainer”仍然需要在我当前使用的“Div1”中生成。

我有以下功能..

function appendDiv() {
            document.getElementById('div1').innerHTML += '<div class="word">'
                +  document.getElementById('word').value
                + '</div><div class="definition">'
                + document.getElementById('def').value +
                "</div>";


        }

这是我的 HTML...

    <input type="text" id="def" aria-label="Last name" class="form-control" placeholder="Definition"style="margin: 10px;">
    <button type="button" class="btn btn-secondary" onclick="clearText()">Clear Text</button>
    <button type="button" class="btn btn-primary" onclick="appendDiv()">Create Card</button>
    <div id="div1"></div>
    <br>

这是我的 CSS。因为我是这样做的，所以我的 CSS 有点乱。一旦我弄清楚如何正确地做到这一点，它应该没问题....

{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

    .btn {
        margin: 10px;
        margin-top: 5px;
    }

    div {
        background-color:lightcoral;
        margin: 20px;
        width: 200px;
        height: 225;
        text-align: center;
        float: left;
        border-radius: 5px;
        color: white;
        padding-top: 35px;
        padding-bottom: 35px;
        padding-left: 20px;
        padding-right: 20px;
        font-weight: lighter;
        text-align: center;
        font-size: 16px;
        overflow-y: auto;

    }

    #div1 {
        background-color: white;
        width: 100%;
        height: 100%;
        text-align: start;
        font-weight: bold;
    }


    span {
        width: 500px;
        justify-content: center;
        margin-left: 10px;
        margin-top: 20px;
    }

    .input-group-text {
        color: white;
        background-color: cornflowerblue;

    }

    .form-control {
        width: 25%;
    }

    #def {
        width: 60%;
        height: 50px;
    }


    div.word {

        backface-visibility: hidden;
        background-color:lightsteelblue;
        margin: 20px;
        width: 200px;
        height: 225;
        text-align: center;
        float: left;
        border-radius: 5px;
        color: white;
        padding: 10px;
        padding-top: 75px;
        padding-bottom: 35px;
        font-weight: bold;
        color: black;
         border-width: 4px;
  border-color:lightseagreen;
  border-style: solid;
  justify-content: center;
    }

    ;

    div.definition {
        background: green;
        backface-visibility: hidden;
        transform: rotateY(180deg);
        margin: 20px;
        width: 200px;
        height: 225;
        text-align: center;
        float: left;
        border-radius: 5px;
        color: white;
        padding: 10px;
font-weight: lighter;
float: left;
border-width: 4px;
  border-style: solid
    }

提前感谢您的帮助。

Answer 1

只需添加另一个具有“cardholder”类的 div。

function appendDiv() {
            document.getElementById('div1').innerHTML += '<div class="cardholder"><div class="word">'
                +  document.getElementById('word').value
                + '</div><div class="definition">'
                + document.getElementById('def').value +
                "</div></div>";


        }

Answer 2

您可以使用 appendChild 实现您想要的。之后，您可以使用 div.innerHTML 添加所需的类和 div 的值。如果要在 p 元素中设置文本，则可以在定义 div 中附加一个 p 标记。

您可以在Codepen查看演示

这里是新的 JS 函数：

function appendDiv() {
  let div1 = document.getElementById('div1');

  //Container div
  const divContainer = document.createElement("div");
  divContainer.classList.add("Cardcontainer");
  div1.appendChild(divContainer);

  // 2 Divs in container
  const divWord = document.createElement("div");
  const divDef = document.createElement("div");

  divWord.classList.add("word");
  divDef.classList.add("definition");
  divDef.innerHTML = document.getElementById('def').value;

  divContainer.appendChild(divWord);
  divContainer.appendChild(divDef);
}