语法:

$(selector).append(content)

例:jq在元素内部的结尾处追加元素

代码

jq点击增加html代码jQuery 中几种常用的追加元素的办法 SQL

&lt;!DOCTYPE html&gt;<html><head> <script src=\"大众https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js\"大众 type=\"大众text/javascript\"大众></script></head><body><div id=\"大众mochu\"大众> <div>我是原来的内容</div> <div>飞鸟慕鱼博客</div></div><script> $('#mochu').append('<p>我假如插入的内容</p>');</script></body></html>

代码运行结果,如下图

注:

1、如果利用JS动态修正HTML元素后,只能在浏览器的掌握台中查看

2、查看方法:浏览器 按 F12

jQuery prepend() 方法

jQuery prepend():方法在当选元素内部的起始位置插入内容

语法:

$(selector).prepend(content)

例:JQ在元素内部的开始位置追加HTML元素

代码:

<!DOCTYPE html><html><head> <script src=\"大众https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js\"大众 type=\公众text/javascript\公众></script></head><body><div id=\"大众mochu\公众> <div>我是原来的内容</div> <div>飞鸟慕鱼博客</div></div><script> $('#mochu').prepend('<p>我是利用prepend方法插入的内容</p>');</script></body></html>

运行结果如下图:

jQuery before() 方法

jQuery before():方法在当选元素的前面插入元素,形成兄弟节点

语法:

$(selector).before(content)

例:jq在指定元素前面追加内容

代码:

<!DOCTYPE html><html><head> <script src=\公众https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js\公众 type=\"大众text/javascript\"大众></script></head><body><div id=\"大众mochu\"大众> <div>我是原来的内容</div> <div>飞鸟慕鱼博客</div></div><script> $('#mochu').before('<p>我是利用before方法插入的内容</p>');</script></body></html>

代码运行结果:

jQuery after() 方法

jQuery after():方法在当选元素的后面插入内容,形成兄弟节点的关系。

语法:

$(selector).after(content)

例:JQ在指定元素的后面插入内容

<!DOCTYPE html><html><head> <script src=\公众https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js\"大众 type=\"大众text/javascript\公众></script></head><body><div id=\公众mochu\公众> <div>我是原来的内容</div> <div>飞鸟慕鱼博客</div></div><script> $('#mochu').after('<p>我是利用after方法追加的内容</p>');</script></body></html>

代码运行结果: