DOM節點創建（jQuery）

1DOM創建節點及節點屬性

通過JavaScript可以很方便的獲取DOM節點，從而進行一系列的DOM操作。但實際上一般開發者都習慣性的先定義好HTML結構，但這樣就非常不靈活了。

試想下這樣的情況：如果我們通過AJAX獲取到數據之后然后才能確定結構的話，這種情況就需要動態的處理節點了

本文向大家介紹一下如何使用JavaScript創建div節點元素，主要包括創建div節點元素的屬性和創建div節點元素的樣式兩大部分內容，相信本文介紹一定會讓你有所收獲。

先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問題）

創建流程比較簡單，大體如下：

1. 創建節點(常見的：元素、屬性和文本)
2. 添加節點的一些屬性
3. 加入到文檔中

流程中涉及的一點方法：

• 創建元素：document.createElement
• 設置屬性：setAttribute
• 添加文本：innerHTML
• 加入文檔：appendChild

如右邊代碼所示，寫一個最簡單的元素創建，我們會發現幾個問題：

1. 每一個元素節點都必須單獨創建
2. 節點是屬性需要單獨設置，而且設置的接口不是很統一
3. 添加到指定的元素位置不靈活
4. 最后還有一個最重要的：瀏覽器兼容問題處理

針對這一系列的DOM操作的問題，jQuery給出了一套非常完美的接口方法，我們之后就開始深入學習

2jQuery節點創建與屬性的處理

上一節介紹了通過JavaScript原生接口創建節點，在處理上是非常復雜與繁瑣的。我們可以通過使用jQuery來簡化了這個過程

創建元素節點：

可以有幾種方式，后面會慢慢接觸。常見的就是直接把這個節點的結構給通過HTML標記字符串描述出來，通過$()函數處理，$("html結構")

$("<div></div>")

創建為本節點：

與創建元素節點類似，可以直接把文本內容一並描述

$("<div>我是文本節點</div>")

創建為屬性節點：

與創建元素節點同樣的方式

$("<div id='test' class='aaron'>我是文本節點</div>")

我們通過jQuery把上一屆的代碼改造一下，如右邊代碼所示

一條一句就搞定了，跟寫HTML結構方式是一樣的

$("<div class='right'><div class='aaron'>動態創建DIV元素節點</div></div>")

這就是jQuery創建節點的方式，讓我們保留HTML的結構書寫方式，非常的簡單、方便和靈活