appendTo li:last問題
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <style>
? ? .left {
? ? ? ? width: auto;
? ? ? ? height: 150px;
? ? }
? ??
? ? .left div {
? ? ? ? width: 150px;
? ? ? ? height: 120px;
? ? ? ? padding: 5px;
? ? ? ? margin: 5px;
? ? ? ? float: left;
? ? ? ? background: #bbffaa;
? ? ? ? border: 1px solid #ccc;
? ? }
? ? </style>
? ? <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
? ? <h2>add方法()</h2>
? ? <div class="left first-div">
? ? ? ? <div class="div">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>list item 1</li>
? ? ? ? ? ? ? ? <li>list item 2</li>
? ? ? ? ? ? ? ? <li>list item 3</li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <p>新的p元素</p>
? ? ? ? </div>
? ? </div>
? ? <div class="right"></div>
? ? <br/>
? ? <button>點擊：add傳遞元素標(biāo)簽</button>
? ? <button>點擊：add傳遞html結(jié)構(gòu)</button>
? ? <script type="text/javascript">
? ? $("button:first").click(function() {
? ? ? ? ?//把p元素添加到li的合集中
? ? ? ? ?//$('li').add('p').css('background', 'red')
? ? ? ? ?$('li').add('<li>list item 4</li>').appendTo($('li:last'))
? ? })
? ? </script>
? ? <script type="text/javascript">
? ? $("button:last").click(function() {
? ? ? ? ?//把html結(jié)構(gòu)'<p>新的p元素</p>'
? ? ? ? ?//加入到li的合集中，為了能夠在頁面上顯示
? ? ? ? ?//需要再重新appendTo到指定的節(jié)點處
? ? ? ? ?//值得注意：整個結(jié)構(gòu)位置都改變了
? ? ? ? ?$('li').add('<p>新的p元素</p>').appendTo($('.right'))
? ? })
? ? </script>
</body>
</html>
運(yùn)行第一次是
運(yùn)行第二次是
哪位大神可以幫忙解釋一下這是為什么呀
2017-07-21
你語句后面加個;號結(jié)束語句就行了，老師那個錯誤示范- -
2017-07-20
第一次點擊可以理解了、第二次還是理解不來
2017-07-20
運(yùn)行第一次是
運(yùn)行第二次是
哪位大神可以幫忙解釋一下這是為什么呀