日期:2014-05-16  浏览次数:20230 次

JavaScript 创建 Div

JavaScript创建div的属性和样式
关键字: javascript创建div的属性和样式
问题域:
如何由JavaScript创建div节点元素:
???????????????? 创建div节点元素的属性;
???????????????? 创建div节点元素的样式;

解决方案:
1.创建div元素:


Javascript代码
1.<script type="text/javascript">??
2.????? function createElement(){??
3.??? var createDiv = document.createElement("div");??
4.??? createDiv.innerHTML = "Test create a div element!";??
5.??? document.body.appendChild(createDiv);??
6.?????? }??
7.</script>?
<script type="text/javascript">
????? function createElement(){
?var createDiv = document.createElement("div");
?createDiv.innerHTML = "Test create a div element!";
?document.body.appendChild(createDiv);
?????? }
</script>

?

2.创建div的属性:

?

Javascript代码
1.<script type="text/javascript">??
2.??? function createElement(){??
3.??? var createDiv = document.createElement("div");??
4.??? createDiv.title="this is a new div.";??
5.???????? createDiv.id="newDivId";??
6.??? createDiv.className = "newDivClass";??????
7.??? createDiv.innerHTML = "Test create a div element!";??
8.??? document.body.appendChild(createDiv);??
9.???? }??
10.</script>?
<script type="text/javascript">
??? function createElement(){
?var createDiv = document.createElement("div");
?createDiv.title="this is a new div.";
???????? createDiv.id="newDivId";
?createDiv.className = "newDivClass";?
?createDiv.innerHTML = "Test create a div element!";
?document.body.appendChild(createDiv);
???? }
</script>

?

3.创建div的样式:

?

Javascript代码
1.<script type="text/javascript">??
2.?
3.???? function createElement(){??
4.??? var createDiv = document.createElement("div");??
5.??? createDiv.style.background = "pink";??
6.???????? createDiv.style.border="1px solid red";??
7.??? createDiv.style.width = "50px";??
8.??? createDiv.style.height = "50px";??
9.??? createDiv.innerHTML = "Test create a div element!";??
10.??? document.body.appendChild(createDiv);??
11.????? }???
12.</script>?