jQuery系列(三）：操作DOM
1、向DOM添加HTML
.html()方法内部使用原生的innerHTML属性，它既能直接调用.html()方法获取某个元素内的HTML文本，又可以传递HTML代码参数给.html()方法以设定其内部的HTML。
<script type="text/javascript"> $(document).ready(function(){ $('.content').html('<div class="main">Hei,jQuery!</div>'); }); </script> <body> <div class="content"> <p>I run 4 times a week.</p> <p>I lift weights 3 times a week.</p> </div> </body>
显示为：Hei,jQuery!
2、设置DOM元素文本
.text()方法和.html()方法非常相似，只不过它仅抓取匹配元素内的字符串形式的文本。没有参数时获取元素文本，提供参数时设定元素文本。参数只能是字符串，不能是HTML代码。
<script type="text/javascript"> $(document).ready(function(){ //$('.content').html('<div class="main">Hei,jQuery!</div>'); alert($('.content').text()); //输出： //I run 4 times a week. //I lift weights 3 times a week. $('.content').text("Hi,change Text!"); //显示： //Hi,change Text! }); </script> <body> <div class="content"> <p>I run 4 times a week.</p> <p>I lift weights 3 times a week.</p> </div> </body>
3、在一个元素内追加或在其最前面插入HTML
如果打算在某个元素内添加一些HTML，可以使用.append()方法将它追加到目标元素内容之后，也可以使用.prepend()方法将它插入到目标元素内容之前。.prepend()方法总是将参数插入到目标元素内第一个子元素之前，而.append()则总是将参数追加到目标元素内最后一个子元素之后。
$(document).ready(function(){ $('.content').append("<p>I am a student!</p>"); //显示： //I run 4 times a week. //I lift weights 3 times a week. //I am a student! });
4、在DOM某个元素之前或之后添加HTML
.before()和.after()方法与.append()和.prepend()方法非常相似，他们的区别主要是在HTML插入位置。.before()和.after()并不是把HTML插入到目标元素内部，而是将HTML插入到目标元素之前或之后。
$(document).ready(function(){ $('.content').after("<p>I am a student!</p>"); //显示： //I run 4 times a week. //I lift weights 3 times a week. //I am a student! });
firebug下的显示：
5、从DOM中删除HTML元素
.remove()方法用来从DOM中删除元素。不过很多人倾向通过css隐藏这些元素。
$(document).ready(function(){ $('.content').remove(); //显示为空 });
6、克隆HTML元素
.clone()方法复制克隆选中的任何元素。当一个元素克隆之后，就可以使用.append()之类的方法将克隆的元素放置到任何地方。
$(document).ready(function(){ $('.content').append($('.content').clone()); //firebug下显示: // <div class="content"> // <p>I run 4 times a week.</p> // <p>I lift weights 3 times a week.</p> // <div class="content"> // <p>I run 4 times a week.</p> // <p>I lift weights 3 times a week.</p> // </div> // </div> // </body> });
