清空html追加的内容,jquery节点操作:创建/添加/删除/清空/复制元素

jquery节点操作

动态创建元素

$()函数的另外一个作用:动态创建元素

var $spanNode = $(“我是一个span元素”);

添加元素

append():在元素的最后一个子元素后面追加元素

作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以),如果是页面中存在的元素,那么调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了。如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去。

常用参数:htmlString 或者 jQuery对象

// 在$(selector)中追加$node

$(selector).append($node);

// 在$(selector)中追加div元素,参数为htmlString

$(selector).append('

不常用操作:

appendTo()

作用:同append(),区别是:把$(selector)追加到node中去:$(selector).appendTo(node);

prepend()

作用:在元素的第一个子元素前面追加内容或节点:$(selector).prepend(node);

after()

作用:在被选元素之后,作为兄弟元素插入内容或节点:$(selector).after(node);

before()

作用:在被选元素之前,作为兄弟元素插入内容或节点:$(selector).before(node);

//第一种:append(); 在调用者的所有子元素的最后面添加新元素

var newJQ1 = $("

我是append添加的li")

$("ul").append(newJQ1);

//第一种(下):appendTo(); 在调用者的所有子元素的最后面添加新元素

//被添加者和调用者与append位置想法

var newJQ11 = $("

我是appendTo添加的li")

newJQ11.appendTo($("ul"));

//第二种:prepend();在调用者的所有子元素的最前面添加新元素

var newJQ2 = $("

我是prepend添加的li")

$("ul").prepend(newJQ2);

//第二种(下):appendTo(); 在调用者的所有子元素的最前面添加新元素

//被添加者和调用者与prepend位置想法

var newJQ22 = $("

我是prependTo添加的li")

newJQ22.prependTo($("ul"));

//操作兄弟元素

//第三种:after();把某个元素以兄弟元素的形式添加到调用者之后

var newJQ3 = $("

我是after添加的li");

$("#box").after(newJQ3);

//第三种:before();把某个元素以兄弟元素的形式添加到调用者之前

var newJQ4 = $("

我是before添加的li");

$("#box").before(newJQ4);

html创建元素(补充)

作用:设置或返回所选元素的html内容(包括 HTML 标记)

设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的 innerHTML属性相同

// 动态创建元素

$(selector).html(‘创建元素’);

// 获取html内容

$(selector).html();

清空和删除元素

清空指定元素的所有子元素

没有参数

$(selector).empty();

$(selector).html("");

//把自己(包括所有内部元素)从文档中删除掉

$(selector).remove();

建议使用html("")方法来创建元素或者html("")清空元素。

复制元素

作用:复制匹配的元素

复制$(selector)所匹配到的元素

返回值为复制的新元素 $(selector).clone();

//获取按钮,赋值id为box的li,添加到ul的最后

$("button").click(function () {

//和参数无关,只能深层复制

var jqLI = $("#box").clone();

$("ul").append(jqLI);

});

如果本文有什么错误,欢迎留言指正,谢谢您!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值