我正在构建一个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
}
提前感谢您的帮助。
只需添加具有“ 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>";
}
您可以通过使用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);
}