我使用HTML和CSS创建了下面的<div>。我不希望在页面加载时创建这些div，而是希望仅在执行JavaScript函数时创建它们。
如果可能的话，我希望它们实际上是由函数创建的，而不是隐藏/取消隐藏
有没有方法可以把这些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>
5条答案
按热度按时间vxqlmq5t1#
错误是由于
appendChild()方法的错误实现引起的。您正在将参数作为字符串传递：document.appendChild("div")而不是创建的元素.appendChild(div)。另外，你应该指定你想要附加的标签。在本例中，我使用<body>标签：尝试以下代码段：
x一个一个一个一个x一个一个二个x
6kkfgxo02#
您可以使用JavaScript动态创建div。使用document.createElement执行此操作：
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
但是对于您的代码来说还不够。
div是在客户端呈现的。浏览器知道读取html文件并通过它在你的屏幕上绘制ui。Php是一种服务器语言。所以当你混合php和html时，服务器将代码呈现到html模板中，这样客户端只得到html。客户端不知道如何处理php代码。
隐藏div是客户端应该做的事情。
所以我认为更好的方法是将客户端代码和服务器代码分开，客户端需要从php服务器获取所需的数据，然后动态地创建驱动程序。
另一个选项，只有当你想创建一次div时才相关，我的意思是不要删除和创建div超过一次，是让php服务器根据命令创建那些div
lx0bsm1f3#
javascript中有一个方法可以创建div，命令是
document.createElement您还可以根据需要调整其属性。
如果你只想创建一个div，下面是代码：
但如果你想调整它的属性，如它的ID，这应该是你的代码：
ee7vknir4#
你想做这样的事情吗？HTML：
Javascript：
您可以将其与onclick属性一起使用。
3zwtqj6y5#
要使用JavaScript创建div元素，可以使用以下代码：
//新建一个div元素var div = document.createElement（“div”）;
//设置div的内容div.innerHTML =“这是一个div元素。";
//将div添加到页面文档中.body.appendChild（div）;
此代码创建一个新的div元素，将其内容设置为“This is a div element”，然后通过将div附加到body元素来将其添加到页面中。
您还可以使用setAttribute方法设置div的属性，如其id、class和style：
//设置div的id属性div.setAttribute（“id”，“myDiv”）;
//设置div的类属性div.setAttribute（“class”，“myClass”）;
//设置div的样式属性div.setAttribute（“style”，“color：红色;字体大小：20px;”）;
此代码将div的id设置为“myDiv”，将其类设置为“myClass”，将其样式设置为“color：红色;字体大小：20px;"。
创建div并设置其属性后，就可以像使用其他div元素一样在页面中使用它。