<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title></title>
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
????<style>
????.test1?{
????????background:?#bbffaa;
????}
????
????.test2?{
????????background:?yellow;
????}
????</style>
</head>
<body>
????<h2>通過insertBefore與insertAfter添加元素</h2>
????<button?id="bt1">點擊通過jQuery的insertBefore添加元素</button>
????<button?id="bt2">點擊通過jQuery的insertAfter添加元素</button>
????<div?class="aaron">
????????<p?class="test1">測試insertBefore,不支持多參數(shù)</p>
????</div>
????<div?class="aaron">
????????<p?class="test2">測試insertAfter,不支持多參數(shù)</p>
????</div>
????<script?type="text/javascript">
????$("#bt1").on('click',?function()?{
????????//在test1元素前后插入集合中每個匹配的元素
????????//不支持多參數(shù)
????????$(".test1").before($('<p?style="color:red">測試insertBefore方法增加</p>','<p?style="color:red">多參數(shù)</p>'))
????})
????</script>
????<script?type="text/javascript">
????$("#bt2").on('click',?function()?{
????????//在test2元素前后插入集合中每個匹配的元素
????????//不支持多參數(shù)
????????$('<p?style="color:red">測試insertAfter方法增加</p>',?'<p?style="color:red">多參數(shù)</p>').insertAfter($(".test2"))
????})
????</script>
</body>
</html>
2016-12-16
$(".test1").before($('<p?style="color:red">測試insertBefore方法增加</p>','<p?style="color:red">多參數(shù)</p>'))
before后面應(yīng)該直接放html代碼，而不是jquery對象。去掉$()，就可以了。
$(".test1").before('<p?style="color:red">測試insertBefore方法增加</p>','<p?style="color:red">多參數(shù)</p>')