<!DOCTYPE html><html><head>??? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />??? <title></title>??? <link rel="stylesheet" href="imooc.css" type="text/css">??? <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>??? <h3>.html()與.text()</h3>??? <div class="left first-div">??????? <div class="div">??????????? <a>:first-child</a>??????????? <a>第二個元素</a>??????????? <a>:last-child</a>??????? </div>? ??????? <div class="div">??????????? <a>:first-child</a>??????????? <a>第二個元素</a>??????????? <a>:last-child</a>??????? </div>??? </div>??? ??? <h4>顯示通過html方法獲取到的內容</h4>??? <p></p>??? <h4>顯示通過text方法獲取到的內容</h4>??? <p></p>??? <script type="text/javascript">??????? //顯示出html方法獲取到的內容??????? //.html()是整個html文檔結構??????? $('p:first').html( $(".first-div").html() ) ??? </script>??? <script type="text/javascript">??????? //顯示出text方法獲取到的內容??????? //.text()是文本內容的合集??????? $('p:last').text( $(".first-div").text() ) ??? </script>??? <script type="text/javascript">??????? //通過.text()方法替換文本內容??????? $(".left a:first").text('替換第一個a元素的內容')??? </script>??? <script type="text/javascript">??????? //通過.html()方法替換html結構??????? $(".left div:first").html('整個div的子節點都被替換了')??? </script>??? <script type="text/javascript">??????? //通過.text()的回調,獲取原本的內容,修改,在重新賦值??????? $(".left a:first").text(function(idnex,text){??????????? return '增加新的文本內容' + text??????? })??? </script>?</body></html>?
html()和text()替換到底有何不同??
北極的大熊
2017-02-08 10:49:57