我有以下<div>我使用 HTML 和 CSS 创建的。我不希望在页面加载时创建这些 div，而是希望仅在执行 JavaScript 函数时创建它们。
I would prefer if they were actually created by the function, if possible, rather than being hidden/unhidden
有没有办法可以在函数中添加这个精确的 HTML 代码，或者我需要使用 JavaScript 来创建这些 div？如果我需要使用 JavaScript，有人可以解释如何使用吗？
HTML
<div class = 'rowcontainer' id = "r<?php echo $studentid ?>" >
<div class = 'name'><t><?php echo $firstname," ",$lastname; ?></t></div>
<div class = 'ako'><t><?php echo $ako; ?></t></div>
<div class = 'select'>
<input type = 'checkbox' class = 'checkbox move'>
</div>
</div>
CSS
.rowcontainer {
width: 100%;
height: 30px;
}
.name {
line-height: 30px;
float: left;
width: 60%;
height: 100%;
padding-left: 15px
}
.ako {
line-height: 30px;
text-align: center;
float: left;
width: 20%;
height: 100%;
}
.select {
line-height: 30px;
text-align: center;
float: right;
width: 15%;
height: 100%;
}
.checkbox {
height: 17px;
width: 17px;
margin: auto;
margin-top: 6px;
}
感谢您的所有回答，但不幸的是我似乎无法让它发挥作用。当我使用下面的代码创建一个新文档时，我得到的只是一个空白窗口和以下错误。 Error 1 (new page) 此外，当我尝试将此代码添加到现有页面时，我收到类似的错误，并且页面上没有任何变化。 Error 2 (existing page) 我错过了什么？
<body>
<script>
let div = document.createElement("div");
div.id = "div_id" ;
div.className = "div_class";
div.style = "background-color: red;";
div.style.width = "100px";
div.style.height = "100px";
document.appendChild("div");
</script>
</body>
最佳答案
该错误是由 appendChild() 的错误实现引起的方法。您将参数作为字符串传递:document.appendChild("div")而不是创建的元素 .appendChild(div) .
此外，您应该指定要附加的标签。在本例中，我使用 <body>标签:
document.body.appendChild(div)
尝试以下代码片段:
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
const div = document.createElement("div");
div.id = "div_id" ;
div.className = "div_class";
div.style = "background-color: red;";
div.style.width = "100px";
div.style.height = "100px";
document.body.appendChild(div);
});<button id="btn" style="margin:10px">Create Div</button>关于javascript - 如何使用 JavaScript 创建 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69069502/