本文详细介绍如何使用JavaScript动态创建div元素，包括基础创建方法、设置title/id/class等属性，以及通过style对象直接定义背景、边框、宽高和innerHTML等样式与内容。
JavaScript动态创建div元素、属性及样式设置详解
使用JavaScript代码实现动态创建div元素。
具体实现代码如下：
<script type="text/javascript">
function createElement(){
var createDiv = document.createElement("div");
createDiv.innerHTML = "Test create a div element!";
document.body.appendChild(createDiv);
}
</script>
<script type="text/javascript">
function createElement(){
var createDiv = document.createElement("div");
createDiv.innerHTML = "Test create a div element!";
document.body.appendChild(createDiv);
divFileitem.appendChild(divName); <!-- no "document" if not body-->
}
</script>2.创建div的属性：
使用JavaScript代码设置div元素的属性。
具体实现代码如下：
<script type="text/javascript">
function createElement(){
var createDiv = document.createElement("div");
createDiv.title = "this is a new div.";
createDiv.id = "newDivId";
createDiv.class = "newDivClass";
createDiv.innerHTML = "Test create a div element!";
document.body.appendChild(createDiv);
}
</script>
<script type="text/javascript">
function createElement(){
var createDiv = document.createElement("div");
createDiv.title = "this is a new div.";
createDiv.id = "newDivId";
createDiv.class = "newDivClass";
createDiv.innerHTML = "Test create a div element!";
document.body.appendChild(createDiv);
<!--Directly use 2 CSS class styles-->
createDiv.className = "name file_col";
}
</script>3.创建div的样式：
使用JavaScript代码设置div元素的样式。
具体实现代码如下：
<script type="text/javascript">
function createElement(){
var createDiv = document.createElement("div");
createDiv.style.background = "pink";
createDiv.style.border = "1px solid red";
createDiv.style.width = "50px";
createDiv.style.height = "50px";
createDiv.innerHTML = "Test create a div element!";
document.body.appendChild(createDiv);
}
</script>