我使用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元素一样在页面中使用它。