DOM創(chuàng)建節(jié)點及節(jié)點屬性
通過JavaScript可以很方便的獲取DOM節(jié)點，從而進行一系列的DOM操作。但實際上一般開發(fā)者都習慣性的先定義好HTML結構，但這樣就非常不靈活了。
試想下這樣的情況：如果我們通過AJAX獲取到數(shù)據(jù)之后然后才能確定結構的話，這種情況就需要動態(tài)的處理節(jié)點了
本文向大家介紹一下如何使用JavaScript創(chuàng)建div節(jié)點元素，主要包括創(chuàng)建div節(jié)點元素的屬性和創(chuàng)建div節(jié)點元素的樣式兩大部分內(nèi)容，相信本文介紹一定會讓你有所收獲。
先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問題）
創(chuàng)建流程比較簡單，大體如下：
- 創(chuàng)建節(jié)點(常見的：元素、屬性和文本)
- 添加節(jié)點的一些屬性
- 加入到文檔中
流程中涉及的一點方法：
- 創(chuàng)建元素：document.createElement
- 設置屬性：setAttribute
- 添加文本：innerHTML
- 加入文檔：appendChild
如右邊代碼所示，寫一個最簡單的元素創(chuàng)建，我們會發(fā)現(xiàn)幾個問題：
- 每一個元素節(jié)點都必須單獨創(chuàng)建
- 節(jié)點是屬性需要單獨設置，而且設置的接口不是很統(tǒng)一
- 添加到指定的元素位置不靈活
- 最后還有一個最重要的：瀏覽器兼容問題處理
針對這一系列的DOM操作的問題，jQuery給出了一套非常完美的接口方法，我們之后就開始深入學習
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
</head>
<body>
<h2>動態(tài)創(chuàng)建元素節(jié)點</h2>
<div class="left">
<div class="aaron">點擊body區(qū)域會動態(tài)創(chuàng)建元素節(jié)點</div>
</div>
<script type="text/javascript">
var body = document.querySelector('body');
document.addEventListener('click',function(){
//創(chuàng)建2個div元素
var rightdiv = document.createElement('div')
var rightaaron = document.createElement("div");
//給2個div設置不同的屬性
rightdiv.setAttribute('class', 'right')
rightaaron.className = 'aaron'
rightaaron.innerHTML = "動態(tài)創(chuàng)建DIV元素節(jié)點";
//2個div合并成包含關系
rightdiv.appendChild(rightaaron)
//繪制到頁面body
body.appendChild(rightdiv)
},false)
</script>
</body>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
