笔记：JQuery之节点操作

1. 创建节点

// 动态创建的新元素节点不会被自动添加到文档
// 注意闭合标签和使用标准的 XHTML 格式。例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“<P>”)
$("<p>123</p>");

1. 插入节点（子节点）

// 将新创建的元素节点插入到某个元素里的子节点最后面
$("<li id='JS'>江苏</li>").appendTo($("#city"));
// 某个元素里的子节点最后面插入新创建的元素节点
$("#city").append("<li id='JS'>江苏</li>");

// 将新创建的元素节点插入到某个元素里的子节点最前面
$("<li id='JS'>江苏</li>").prependTo($("#city"));
// 某个元素里的子节点最前面插入新创建的元素节点
$("#city").prepend("<li id='JS'>江苏</li>");

2.插入节点（同级节点）

// 将新创建的元素节点插入到某个元素的后面
$("<li id='JS'>江苏</li>").insertAfter($("#bj"));
// 某个元素的后面插入新创建的元素节点
$("#bj").after("<li id='JS'>江苏</li>");

// 将新创建的元素节点插入到某个元素的后面
$("<li id='JS'>山东</li>").insertBefore($("#bj"));
// 某个元素的后面插入新创建的元素节点
$("#bj").before("<li id='JS'>山东</li>");

3. 删除节点

// 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
$("#p").remove();

4. 清空节点

// 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
$("#game").empty();

5. 复制节点

// clone() 复制的新节点不具有任何行为
// clone(true) 在克隆节点的同时，克隆节点包含的事件
$("#bj").clone().insertBefore($("#rl"));

6. 替换节点

// replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
// replaceAll(): 颠倒了的 replaceWith() 方法。
// 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

$("<li>哈哈</li>").replaceAll($("#city li:last"));

7. 包裹节点

// 包裹 li 本身
$("#city li").wrap("<font color='#a52a2a'></font>");
// 包裹所有的 li
$("#game li").wrapAll("<font color='#a52a2a'></font>");
// 包裹 li 里面的内容
$("#language li").wrapInner("<font color='#a52a2a'></font>");

笔记：JQuery之节点操作

猜你喜欢