全部課程
發(fā)布時(shí)間： 2019-01-04 15:17:57
?DOM 中有一個(gè)非常重要的功能，就是節(jié)點(diǎn)模型，也就是 DOM 中的“M”。頁(yè)面中的元素結(jié)構(gòu)就是通過(guò)這種節(jié)點(diǎn)模型來(lái)互相對(duì)應(yīng)著的，只需要通過(guò)這些節(jié)點(diǎn)關(guān)系，可以創(chuàng)建、插入、替換、克隆、刪除等等一些列的元素操作。
一．創(chuàng)建節(jié)點(diǎn)
為了使頁(yè)面更加智能化，有時(shí)想動(dòng)態(tài)的在 html 結(jié)構(gòu)頁(yè)面添加一個(gè)元素標(biāo)簽，那么在插入之前首先要做的動(dòng)作就是：創(chuàng)建節(jié)點(diǎn)。
var box = $('<div id="box">節(jié)點(diǎn)</div>'); //創(chuàng)建一個(gè)節(jié)點(diǎn)
$('body').append(box); //將節(jié)點(diǎn)插入到<body>元素內(nèi)部
二．插入節(jié)點(diǎn)
在創(chuàng)建節(jié)點(diǎn)的過(guò)程中，已經(jīng)演示怎么通過(guò).append()方法來(lái)插入一個(gè)節(jié)點(diǎn)。但除了這個(gè)方法之余呢，jQuery 提供了其他幾個(gè)方法來(lái)插入節(jié)點(diǎn)。
內(nèi)部插入節(jié)點(diǎn)方法
$('div').append('<strong>節(jié)點(diǎn)</strong>'); //向 div 內(nèi)部插入 strong 節(jié)點(diǎn)
$('div').append(function (index, html) { //使用匿名函數(shù)插入節(jié)點(diǎn)，html 是原節(jié)點(diǎn)的內(nèi)容
return '<strong>節(jié)點(diǎn)</strong>';
});
$('span').appendTo('div'); //將span 節(jié)點(diǎn)移入 div 節(jié)點(diǎn)內(nèi)的后面
$('span').appendTo($('div')); //同上
$('div').prepend('<span>節(jié)點(diǎn)</span>'); //將 span 插入到 div 內(nèi)部的前面
$('div').prepend(function (index, html) { //使用匿名函數(shù)，同上
return '<span>節(jié)點(diǎn)</span>';
});
$('span').prependTo('div'); //將 span 移入 div 內(nèi)部的前面
$('span').prependTo($('div')); //同上
微信
公眾號(hào)
