js数组删除元素的方法 jquery数组添加元素

jquery 中有很多种追加元素的方法,今天就介绍几种最常用的,做个笔记,记录一下 。
jQuery append() 方法append():方法可以在被选元素的内部的结尾处插入内容
语法:
$(selector).append(content)例:jq在元素内部的结尾处追加元素
代码:
<!DOCTYPE html><html><head> <script src="http://pic.aipaogen.com/231110/0G2593194-0.jpg" type="text/javascript"></script></head><body><div id="mochu"> <div>我是原来的内容</div> <div>飞鸟慕鱼博客</div></div><script> $('#mochu').append('<p>我要是插入的内容</p>');</script></body></html>代码运行结果,如下图

js数组删除元素的方法 jquery数组添加元素

文章插图
注:
1、如果使用JS动态修改HTML元素后,只能在浏览器的控制台中查看
2、查看方法:浏览器 按 F12
jQuery prepend() 方法jQuery prepend():方法在被选元素内部的起始位置插入内容
语法:
$(selector).prepend(content)例:JQ在元素内部的开始位置追加HTML元素
代码:
<!DOCTYPE html><html><head> <script src="http://pic.aipaogen.com/231110/0G2593194-0.jpg" type="text/javascript"></script></head><body><div id="mochu"> <div>我是原来的内容</div> <div>飞鸟慕鱼博客</div></div><script> $('#mochu').prepend('<p>我是利用prepend方法插入的内容</p>');</script></body></html>运行结果如下图:
js数组删除元素的方法 jquery数组添加元素

文章插图
jQuery before() 方法jQuery before():方法在被选元素的前面插入元素 , 形成兄弟节点
语法:
$(selector).before(content)例:jq在指定元素前面追加内容
代码:
<!DOCTYPE html><html><head> <script src="http://pic.aipaogen.com/231110/0G2593194-0.jpg" type="text/javascript"></script></head><body><div id="mochu"> <div>我是原来的内容</div> <div>飞鸟慕鱼博客</div></div><script> $('#mochu').before('<p>我是利用before方法插入的内容</p>');</script></body></html>代码运行结果:
js数组删除元素的方法 jquery数组添加元素

文章插图
jQuery after() 方法jQuery after():方法在被选元素的后面插入内容,形成兄弟节点的关系 。
语法:
$(selector).after(content)例:JQ在指定元素的后面插入内容
<!DOCTYPE html><html><head> <script src="http://pic.aipaogen.com/231110/0G2593194-0.jpg" type="text/javascript"></script></head><body><div id="mochu"> <div>我是原来的内容</div> <div>飞鸟慕鱼博客</div></div><script> $('#mochu').after('<p>我是利用after方法追加的内容</p>');</script></body></html>【js数组删除元素的方法 jquery数组添加元素】代码运行结果:
js数组删除元素的方法 jquery数组添加元素

文章插图


    以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!

    「爱刨根生活网」www.aipaogen.com小编还为您精选了以下内容,希望对您有所帮助: