JavaScript动态创建div元素、属性及样式设置详解

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>

使用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>

使用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>