jQuery入門教程-文檔操作方法

2019年8月24日 127次阅读 来源: WEBING

一、append()和appendTo()

1.1 append()要領

<body>
    <p>好好學習</p>
    <button>append() 要領</button>
</body>
    <script>
        $('button').click(function() {
            $('p').append('<p>天天向上</p>');
        });
    </script>

《jQuery入門教程-文檔操作方法》

1.2 appendTo()要領

<body>
    <p>好好學習</p>
    <button>appendTo() 要領</button>
</body>
    <script>
        $('button').click(function() {
            $('<p>天天向上</p>').appendTo('p');
        });
    </script>

《jQuery入門教程-文檔操作方法》

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>

《jQuery入門教程-文檔操作方法》

2.2 設置元素內容

當運用該要領設置一個值時，它會掩蓋一切婚配元素的內容 (inner HTML)。

<body>
    <p>好好學習</p>
    <button>設置被選元素的內容</button>
</body>
    <script>
        $('button').click(function() {
            $('p').html('天天向上');
        });
    </script>

《jQuery入門教程-文檔操作方法》

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>

《jQuery入門教程-文檔操作方法》

三、append()、appendTo()和html()的區分

（1）append()和appendTo()要領是在被選元素的末端（依然在內部）插進去內容，是在原有內容的基礎上增添。

（2）html()要領是掩蓋一切內容，是原有的內容被替代。

瀏覽更多

    原文作者：WEBING
    原文地址: https://segmentfault.com/a/1190000014400580
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞