jquery的节点操作说明
前面的篇章对于jquery的元素操作大部分是使用html()
的方式来操作,这种直接使用字符串创建的方式也是性能最高的。
使用html()
操作节点
首先编写一个div
包含一个a
标签,如下:
下面来给这个a
的后面加上一个span
标签看看,如下:
在这里面可以看到,首先使用$('div').html()
得到原来的内部元素字符串,然后再拼接其他br
和span
元素字符串,再赋值回$('div').html()
内,这样就可以根据字符串操作好元素了。
如果能用这种方式操作元素就尽量用这种方式,因为这种方式操作元素的话性能最高。
另外还有其他创建节点、插入节点、删除节点的方法,如下:
var $div2 = $('<div>这是一个div元素</div>'); # 创建节点
append() appendTo() #在现存元素的内部,从后面插入元素
prepend() prependTo() #在现存元素的内部,从前面插入元素
after() insertAfter() #在现存元素的外部,从后面插入元素
before() insertBefore() #在现存元素的外部,从前面插入元素
创建节点
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');
插入节点
1、append()和appendTo():在现存元素的内部,从后面插入元素
下面写一个div内部插入元素的示例如下:
$(function(){
var $span = $('<span>这是一个span</span>');
$('div').append($span);
})
可以看到append
的方法就是父元素增加一个子元素节点,而appendTo()
则是反过来,是子元素增加到父元素的后面,写法如下:
$(function(){
var $span = $('<span>这是一个span</span>');
$span.appendTo($('div'));
})
另外,还可以将现有的a
剪切到div
的最后,操作如下:
那么假设有两个a
标签呢?是否会批量直接剪切过来,还是要使用each()
方法遍历一遍?
直接就可以整体剪切过来。
2、prepend()和prependTo():在现存元素的内部,从前面插入元素
// 在前面插入一个p元素
var $p = $('<p>这是一个p标签</p>');
$('div').prepend($p);
下面来演示一下prependTo()
方法,如下:
// 在前面插入一个p元素
var $p = $('<p>这是一个p标签</p>');
$p.prependTo($('div'));
同样,也可以将已有的元素剪切至最前面。
$('a').prependTo($('div'));
3、after()和insertAfter():在现存元素的外部,从后面插入元素
写一个p
标签插入到div
的后面,如下:
//在div外部后面加一个p元素
$('div').after($p);
var $p = $('<p>这是一个p标签</p>');
$p.insertAfter($('div'));
4、before()和insertBefore():在现存元素的外部,从前面插入元素
在div
前面插入一个div #box2
的元素。
// 在div外部的前面加一个#box2 div
var $div2 = $('<div id="#box2">这是div2元素</div>');
$('div').before($div2);
// 在div外部的前面加一个#box2 div
var $div2 = $('<div id="#box2">这是div2元素</div>');
$div2.insertBefore($('div'));
删除节点
删除a
元素,如下:
// 删除节点
$('a').remove();