after()方法,before() 方法,append() 方法,prepend() 方法,appendTo() 方法,prependTo() 方法,insertAfter() 方法,insertBefore() 方法,wrap()方法,wrapAll() 方法,wrapInner() 方法 。各个方法的使用，利弊，BUG等做了深入说明
这种操作属于【jQuery HTML / CSS 方法】
具体API请看
https://www.runoob.com/jquery/jquery-ref-html.html
第一种：在被选元素前后插入内容
在被选元素后插入内容 请使用 after()方法
和
在被选元素前插入内容，请使用 before() 方法
注意：after()方法和before() 方法不能同时出现使用，会出现BUG的
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").after("<p>Hello world!</p>"); });});</script></head><body><button>在每个P元素后插入内容</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html>结果
<body style=""><button>在每个P元素后插入内容</button><p>这是一个段落。</p><p>Hello world!</p><p>这是另一个段落。</p><p>Hello world!</p></body> 如果两个方法同时执行，结果如下代码
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){$("p").before("<p>前面</p>"); $("p").after("<p>后面</p><hr>"); });});</script></head><body><button>在每个P元素后插入内容</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html>结果
<body style=""><button>在每个P元素后插入内容</button><p>前面</p><p>后面</p><hr><p>这是一个段落。</p><p>后面</p><hr><p>前面</p><p>后面</p><hr><p>这是另一个段落。</p><p>后面</p><hr></body> 为了避免上面错误，我们可以利用for循环遍历 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ var _p=$("p"); for(var i=0; i<_p.length;i++) { _p.eq(i).before("<p>前面</p>"); _p.eq(i).after("<p>后面</p><hr>"); } });});</script></head><body><button>在每个P元素后插入内容</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html>
结果
<body style=""><button>在每个P元素后插入内容</button><p>前面</p><p>这是一个段落。</p><p>后面</p><hr><p>前面</p><p>这是另一个段落。</p><p>后面</p><hr></body>第二种：在被选元素的开始结尾插入内容
append() 方法在被选元素的结尾插入指定内容。
prepend() 方法在被选元素的开头插入指定内容。
注意：append()方法和prepend() 方法不能同时出现使用，会出现BUG的。
如果想要避免，请参考，第一种的for循环遍历代码
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("#btn1").click(function(){ $("p").append(" <b>后面插入</b>.");}); });</script></head><body><p>这是一个段落。</p><p>这是另一个段落</p> <button id="btn1">插入文本</button> </body></html>结果
<body style=""><p>这是一个段落。 <b>后面插入</b>.</p><p>这是另一个段落 <b>后面插入</b>.</p> <button id="btn1">插入文本</button> </body>第三种：在被选元素的结尾插入 HTML 元素
appendTo() 方法在被选元素的结尾插入 HTML 元素。
prependTo() 方法在被选元素的开头插入 HTML 元素。
这两个方法 可以同时使用。
<!DOCTYPE html><html><head><meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("<span>Hello World!</span>").appendTo("p");});});</script></head><body><button>在每个P元素结尾插入span元素。</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html>结果
<body style=""><button>在每个P元素结尾插入span元素。</button><p>这是一个段落。<span>Hello World!</span></p><p>这是另一个段落。<span>Hello World!</span></p></body> appendTo()和prependTo()两个同时使用 <!DOCTYPE html><html><head><meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){ $("<span>开头【</span>").prependTo("p");$("<span>】结尾</span>").appendTo("p");});});</script></head><body><button>在每个P元素结尾插入span元素。</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html> <body style=""><button>在每个P元素结尾插入span元素。</button><p><span>开头【</span>这是一个段落。<span>】结尾</span></p><p><span>开头【</span>这是另一个段落。<span>】结尾</span></p></body>第四种：在被选元素前后插入 HTML 元素
insertAfter() 方法在被选元素后插入 HTML 元素。
insertBefore() 方法在被选元素前插入 HTML 元素。
注意：内容里必须包含html元素标签。
两个方法可以同时使用
<!DOCTYPE html><html><head><meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("<span>Hello world!</span>").insertBefore("p");});});</script></head><body><button>在P元素之前插入span元素</button><br><br><p>这是一个段落。</p><p>这是另一个段落。</p></body></html> <body style=""><button>在P元素之前插入span元素</button><br><br><span>Hello world!</span><p>这是一个段落。</p><span>Hello world!</span><p>这是另一个段落。</p></body> insertAfter() 方法和insertBefore() 方法同时使用 <!DOCTYPE html><html><head><meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("<span>前【</span>").insertBefore("p");$("<span>】Hello world!</span>").insertAfter("p");});});</script></head><body><button>在P元素后面插入span元素</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html> <body style=""><button>在P元素后面插入span元素</button><span>前【</span><p>这是一个段落。</p><span>】Hello world!</span><span>前【</span><p>这是另一个段落。</p><span>】Hello world!</span></body> ------ 如果前面这四个不是你想要的，那么下面就一定是你想要的 ------ 第五种：wrap()在每个被选元素的周围用 HTML 元素包裹起来 <!DOCTYPE html><html><head><meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").wrap("<div></div>");});});</script><style type="text/css">div{background-color:yellow;}</style></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><button>给每个P元素包裹一个div元素</button></body></html> <body style=""><div><p>这是一个段落。</p></div><div><p>这是另一个段落。</p></div><button>给每个P元素包裹一个div元素</button></body>从这个结果可以看出，他是把每个P 标签都用div给包裹了
第六种：wrapAll() 方法使用指定的 HTML 元素来包裹所有被选元素。 <!DOCTYPE html><html><head><meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").wrapAll("<div></div>");});});</script><style type="text/css">div{background-color:yellow;}</style></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><button>给所有p元素包装一个div元素</button></body></html> <body style=""><div><p>这是一个段落。</p><p>这是另一个段落。</p></div><button>给所有p元素包装一个div元素</button></body>从这个结果可以看出，他用div把所有P标签一起给包裹了
第七种：wrapInner() 方法wrapInner() 方法使用指定的 HTML 元素来包裹每个被选元素中的所有内容
<!DOCTYPE html><html><head><meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").wrapInner("<b></b>");});});</script></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><button>在每个p元素的内容上包装一个b元素</button></body></html> <body style=""><p><b>这是一个段落。</b></p><p><b>这是另一个段落。</b></p><button>在每个p元素的内容上包装一个b元素</button></body>从这个结果可以看出，他是把每个P 标签里的内容都用b标签给包裹了
下一篇：如何用JS判断身份证格式