JQ4 DOM 节点操作

/ 0评 / 0
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'); //同上
注意:节点被替换后,所包含的事件行为就全部消失了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注