1.元素节点操作
(1)创建节点
(2)插入节点
append()和appendTo():在现存元素的内部,从后面插入元素
prepend()和prependTo():在现存元素内部,从前面插入元素
after()和insertAfter():在现存元素外部,从后面插入元素
before()和insertBefore():在现存元素的外部,从前面插入元素
$(function(){
/通过HTML的字符串的方式添加节点性能最高,只写a页面就只有a/
/$('.div1').html($('.div1').html()+'123')/
/*新建一个带有属性的a标签,并在后面添加*/
$a = $('123');
/*父元素内的后面放入子元素*/
/*$('.div1').append($a);*/
$a.appendTo($('.div1'));
/*新建立一个空标签*/
$a001 = $('');
$('.div1').append($a001);
/*父元素的前面放入子元素*/
$p = $('123
');
$('.div1').prepend($p);
/*在元素外部的后面插入,before前面*/
$d = $('466');
$('.div1').after($d);
})
(3)删除节点
$(function(){
/把P标签放到h3前面/
$('#no2').insertBefore($('#title'));
/把span标签放进p标签里面/
$('#no3').appendTo($('#no2'));
/删除标签/
$('#title').remove();
})
例子:TO do list
To do list
.list_con{ width: 500px; height: 500px; margin: 50px 300px 0; } .list_con .iptxt{ width: 400px; height: 20px; } .list{ list-style: none; position: relative; padding: 0; } .list li{ height: 40px; margin-top: 5px; border-bottom: 1px solid #AAA7A7; line-height: 40px; } .list a{ float: right; text-decoration: none; margin-left: 40px; }
下一篇:jQuery事件