使用JS函数在1个Div内创建2个sub Divs?

问题描述 投票:-1回答:2

我正在构建一个Web应用程序,但是遇到了问题。我正在构建一个显示带有单词的卡片的闪存卡应用程序,稍后我将添加CSS进行翻转转换以显示该单词的定义。目前,我正在生成一个2个新div(1个代表单词,1个代表定义),所有这些都在“ div1”内。 Div1是一个全宽度的容器,用于容纳所有卡。

我正在努力使它的功能在“ Div1”内创建一个称为“ Cardcontainer”的div,在该div内有2个子div(该单词1个,定义1个)。我不知道如何做到这一点。我能够生成2个div并将它们彼此相邻放置,但是要使我的css技巧起作用,我需要在“ Cardcontainer” div内(并填充100%的)div内有2个div(单词和定义)每次单击“创建卡”按钮时都会生成。

之所以需要这样做,是因为我需要将两个div(单词和定义)彼此重叠放置,以使CSS技巧起作用。因为我正在创建2个单独的div,而没有将它们放在“ Cardcontainer”中,所以无法使此CSS技巧起作用。

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

按钮的当前结构在Div1的内部创建2个div(word和def),Div1是一个容器,仅用于容纳所有卡并将它们与其他页面内容分开。

按钮上我需要什么创建一个名为“ Cardcontainer”的1 div,其中包含2 div(word和def)。仍然需要在我当前使用的“ Div1”中生成此“ Cardcontainer”。

我具有以下功能。

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
    }

提前感谢您的帮助。

javascript html css function appendchild
2个回答
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>";


        }

0
投票

您可以通过使用appendChild实现所需的功能。之后,您可以使用element.innerHTML添加所需的类和div的值。如果要在p元素中设置文本,则可以在定义div中追加Child 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);
}
© www.soinside.com 2019 - 2024. All rights reserved.