JQ4 DOM 节点操作
1.创建节点
var box = $('<div id="box">节点</div>'); //创建一个节点
$('body').append(box); //将节点插入到<body>元素内部
2.插入节点
内部插入节点方法
|
方法名
|
描述
|
|
append(content)
|
向指定每个匹配的元素内部后面插入节点content |
|
append(function (index, html) {})
|
使用匿名函数向指定每个匹配的元素内部后面插入节点
|
|
appendTo(content)
|
将指定元素移入到指定元素content 内部后面
|
|
prepend(content)
|
向指定元素content 内部的前面插入节点
|
|
prepend(function (index, html) {})
|
使用匿名函数向指定元素内部的前面插入节点
|
|
prependTo(content)
|
将指定元素移入到指定元素content 内部前面
|
<p class='append'>I would like to say: </p>
<p class='append'>I would like to say: </p>
$(".append").append("<b>Hello</b>");
<p class='append'>I would like to say: <b>Hello</b></p>
<p class='append'>I would like to say: <b>Hello</b></p>
<p class='append'>节点1: </p>
<p class='append'>节点2: </p>
<div>追加内容</div>
$("p").append($('div'));
<p class="append">节点1: <div>追加内容</div></p>
<p class="append">节点2: <div>追加内容</div></p>
<p class='append'>节点1: </p>
<p class='append'>节点2: </p>
$('.append').append(function (index, html) {
return '<strong>节点</strong>'+'。第'+index+'节点，原节点的html是--'+ html;
});
<p class="append">节点1: <strong>节点</strong>。第0节点，原节点的html是--节点1: </p>
<p class="append">节点2: <strong>节点</strong>。第1节点，原节点的html是--节点2: </p>
<p class='append'>节点1: </p>
<p class='append'>节点2: </p>
<div>追加内容</div>
$("p").appendTo($('div'));//移入操作，不需要创建节点
<p class="append">节点1: <div>追加内容</div></p>
<p class="append">节点2: <div>追加内容</div></p>
<p class='append'>节点1: </p>
<p class='append'>节点2: </p>
<div>追加内容</div>
$("p").prepend($('div'));
<p class="append"><div>追加内容</div>节点1: </p>
<p class="append"><div>追加内容</div>节点2: </p>
<p class='append'>节点1: </p>
<p class='append'>节点2: </p>
$("p").prepend('insert before');
<p class="append">insert before节点1: </p>
<p class="append">insert before节点2: </p>
<p class='append'>节点1: </p>
<p class='append'>节点2: </p>
$('p').prepend(function (index, html) {
return '<div>追加内容</div>';
});
<p class="append"><div>追加内容</div>节点1: </p>
<p class="append"><div>追加内容</div>节点2: </p>
<p class='append'>节点1: </p>
<p class='append'>节点2: </p>
<div>追加内容</div>
$("p").prependTo($('div'));
<div><p class="append">节点1: </p><p class="append">节点2: </p>追加内容</div>
外部插入节点方法
|
方法名
|
描述
|
|
after(content)
|
向指定元素的外部后面插入节点content
|
|
after(function (index, html) {})
|
使用匿名函数向指定元素的外部后面插入节点
|
|
before(content)
|
向指定元素的外部前面插入节点content
|
|
before(function (index, html) {})
|
使用匿名函数向指定元素的外部前面插入节点
|
|
insertAfter(content)
|
将指定节点移到指定元素content 外部的后面
|
|
insertBefore(content)
|
将指定节点移到指定元素content 外部的前面
|
3.包裹节点
wrap()把所有匹配的元素用其他元素的结构化标记包装起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包装完成之后再行添加，返回值:jQuery
包裹节点
|
方法名
|
描述
|
|
wrap(html)
|
向指定元素包裹一层html 代码
|
|
wrap(element)
|
向指定元素包裹一层DOM 对象节点
|
|
wrap(function (index) {})
|
使用匿名函数向指定元素包裹一层自定义内容
|
|
unwrap()
|
移除一层指定元素包裹的内容
|
|
wrapAll(html)
|
用html 将所有元素包裹到一起
|
|
wrapAll(element)
|
用DOM 对象将所有元素包裹在一起
|
|
wrapInner(html)
|
向指定元素的子内容包裹一层html
|
|
wrapInner(element)
|
向指定元素的子内容包裹一层DOM 对象节点
|
|
wrapInner(function (index) {})
|
用匿名函数向指定元素的子内容包裹一层
|
4.节点操作
复制节点
$('body').append($('div').clone(true)); //复制一个节点添加到HTML 中
注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上true
参数的话，这个元素附带的事件处理行为也复制出来。
删除节点
$('div').remove(); //直接删除div 元素
注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以
带选择符参数的，比如：$('div').remove('#box');只删除id=box 的div。
保留事件的删除节点
$('div').detach(); //保留事件行为的删除
注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。
清空节点
$('div').empty(); //删除掉节点里的内容
替换节点
$('div').replaceWith('<span>节点</span>'); //将div 替换成span 元素
$('<span>节点</span>').replaceAll('div'); //同上
注意：节点被替换后，所包含的事件行为就全部消失了。
