一、append()和appendTo()
1.1 append()要領
<body>
<p>好好學習</p>
<button>append() 要領</button>
</body>
<script>
$('button').click(function() {
$('p').append('<p>天天向上</p>');
});
</script>
1.2 appendTo()要領
<body>
<p>好好學習</p>
<button>appendTo() 要領</button>
</body>
<script>
$('button').click(function() {
$('<p>天天向上</p>').appendTo('p');
});
</script>
1.3 append()和appendTo()比較
(1)用法雷同
在被選元素的末端(依然在內部)插進去指定內容。
(2)差別之處
內容和選擇器的位置差別,以及 append() 可以運用函數來附加內容。
二、html()要領
2.1 返回元素內容
當運用該要領返回一個值時,它會返回第一個婚配元素的
內容 (inner HTML)。
<body>
<p>好好學習</p>
<button>返回被選元素的內容</button>
</body>
<script>
$('button').click(function() {
alert($('p').html());
});
</script>
2.2 設置元素內容
當運用該要領設置一個值時,它會掩蓋一切婚配元素的內容 (inner HTML)。
<body>
<p>好好學習</p>
<button>設置被選元素的內容</button>
</body>
<script>
$('button').click(function() {
$('p').html('天天向上');
});
</script>
2.3 運用函數來設置元素內容
(1)語法
$(selector).html(function(index,oldcontent))
(2)參數
參數 | 形貌 |
---|---|
function(index,oldcontent) | 劃定一個返回被選元素的新內容的函數。index – 可選。吸收選擇器的 index 位置。oldcontent – 可選。吸收選擇器的當前內容。 |
(3)示例
<body>
<p>好好學習</p>
<p>天天向上</p>
<button>設置被選元素的內容</button>
</body>
<script>
$('button').click(function() {
$('p').html(function (n) {
return '這個 p 元素的 index 是' + ' ' + n;
});
});
</script>
三、append()、appendTo()和html()的區分
(1)append()和appendTo()要領是在被選元素的末端(依然在內部)插進去內容,是在原有內容的基礎上增添。
(2)html()要領是掩蓋一切內容,是原有的內容被替代。