赣南网 › =微信交流讨论区= › 开发交流 › jquery 操作-插入元素

+发表新主题

查看: 1832|回复: 0

[代码片段] jquery 操作-插入元素

[代码片段] jquery 操作-插入元素

殷三姗发表于 2016-2-5 20:07:48 浏览: 1832 回复: 0 [显示全部楼层] |只看大图回帖奖励

回帖奖励

|倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1.插入元素

* 内部插入

* append() - 类似于原生DOM的appendChild()

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery内部插入</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li id="tj">天津</li>
<li>南京</li>
</ul>
<ul id="game">
<li>反恐精英</li>
<li id="sk">实况足球</li>
<li>英雄联盟</li>
</ul>
<script>
// 操作天津节点和实况足球
// append() - 类似于原生DOM的appendChild()
$("#tj").append($("#sk"));
</script>
</body>
</html>

复制代码

效果：

* prepend() - 类似于原生DOM的insertBefore()

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery内部插入</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li id="tj">天津</li>
<li>南京</li>
</ul>
<ul id="game">
<li>反恐精英</li>
<li id="sk">实况足球</li>
<li>英雄联盟</li>
</ul>
<script>
// 操作天津节点和实况足球
// prepend() - 类似于原生DOM的insertBefore()
$("#tj").prepend($("#sk"));
</script>
</body>
</html>

复制代码

效果：

* appendTo() - 颠倒了的append()

* prependTo() - 颠倒了的prepend()

* 外部插入

* after() - 作为后面的兄弟节点插入

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery外部插入</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li id="tj">天津</li>
<li>南京</li>
</ul>
<ul id="game">
<li>反恐精英</li>
<li id="sk">实况足球</li>
<li>英雄联盟</li>
</ul>
<script>
// after() - 作为后面的兄弟节点插入
$("#tj").after($("#sk"));
</script>
</body>
</html>

复制代码

效果：

* before() - 作为前面的兄弟节点插入

例如：

* insertAfter() - 颠倒了的after()

* insertBefore() - 颠倒了的before()

2.删除元素

* remove() - 删除自身元素及后代元素

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery删除元素</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="game">
<li id="cs">反恐精英
<ul>
<li>警</li>
<li>匪</li>
</ul>
</li>
<li id="sk">实况足球
<ul>
<li>中国</li>
<li>日本</li>
</ul>
</li>
<li>魔兽世界</li>
</ul>
<script>
// 1. 删除id为cs的元素及后代元素
$("#cs").remove();
</script>
</body>
</html>

复制代码

效果：

* empty() - 删除后代元素,但保留自身元素(清空)

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery删除元素</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="game">
<li id="cs">反恐精英
<ul>
<li>警</li>
<li>匪</li>
</ul>
</li>
<li id="sk">实况足球
<ul>
<li>中国</li>
<li>日本</li>
</ul>
</li>
<li>魔兽世界</li>
</ul>
<script>
// 1. 删除id为sk的元素 - 将所有后代元素删除(清空)
$("#sk").empty();
</script>
</body>
</html>

复制代码

效果：

回复

使用道具举报

精彩评论 (0)

阅读推荐

微信要持续发力：“围剿”四大类违规小程序

微信要持续发力：“围剿”四大类违规小程序

腾讯的流量变现新目标：中老年群体

腾讯的流量变现新目标：中老年群体

LOOK获$2200万融资将构建小程序开放平台

LOOK获$2200万融资将构建小程序开放平台

微选今日正式在微信购物频道上线

微选今日正式在微信购物频道上线

震惊这家智能企业去年营收188亿元

震惊这家智能企业去年营收188亿元

《小程序生态报告》：男性用户要更多

《小程序生态报告》：男性用户要更多

支付宝回复“余额宝将被停”传闻：假的

支付宝回复“余额宝将被停”传闻：假的

微信iOS版本更新：可一键切换两个账号，可调整“发现”页面

微信iOS版本更新：可一键切换两个账号，可

技冠群雄

34 主题	36 帖子	106 积分

Rank: 6 Rank: 6

积分: 106

版块推荐

最新资讯

友情链接

英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫