jQuery節點建立與屬性的處理
阿新 • • 發佈：2019-02-14
上一節介紹了通過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的結構書寫方式，非常的簡單、方便和靈活
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <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>動態建立元素節點</h2> <button>點選通過jQuery動態建立元素節點</button> <script type="text/javascript"> var $body = $('body'); $body.on('click', function() { //通過jQuery生成div元素節點 var div = $("<div class='right'><div class='aaron'>動態建立DIV元素節點</div></div>") $body.append(div) }) // var body = document.querySelector('body'); // document.addEventListener('click',function(){ // //建立2個div元素 // var rightdiv = document.createElement('div') // var rightaaron = document.createElement("div"); // //給2個div設定不同的屬性 // rightdiv.setAttribute('class', 'right') // rightaaron.className = 'aaron' // rightaaron.innerHTML = "動態建立DIV元素節點"; // //2個div合併成包含關係 // rightdiv.appendChild(rightaaron) // //繪製到頁面body // body.appendChild(rightdiv) // },false) </script> </body> </html>