JQuery插入元素

opo77_發表於2020-10-11
jQuery

插入元素

有時我們會把jQuery選取的結果儲存在變數中

像這樣： i t e m = item= item=(“li”)因為我們有時候會多次使用一個選取結果，如果每次都重新選取，消耗電腦效能。，所以一般將選取的結果儲存在變數中。
插入元素的兩個步驟：
第一，將新元素建立為jQuery物件
第二，使用一個方法將新內容插入到頁面中。
舉例：
建立一個變數$fragment,其中儲存了一個jQuery物件，他是空的li元素。

var $fragment=$('<li>');

用變數儲存一個jQuery物件，它帶有class和文字元素。

var $fragment=$('<li class="favorite">item</li>');

當擁有了一個包含了新內容的變數時，使用下面的方法把內容插入到頁面中。在這裡插入圖片描述
.before()方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body>    <ul>        <li id="first">1</li>        <li id="second">2</li>        <li id="third">3</li>        <li id="fourth">4</li>    </ul>    <script>        $(function(){            var $item=$('<li>我是插入的</li>');            $("#second").before($item);        });    </script></body></html>

在這裡插入圖片描述.after()方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body>    <ul>        <li id="first">1</li>        <li id="second">2</li>        <li id="third">3</li>        <li id="fourth">4</li>    </ul>    <script>        $(function(){            var $item=$('<li>我是插入的</li>');            $("#second").after($item);        });    </script></body></html>

在這裡插入圖片描述.prepend()方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body>    <ul>        <li id="first">1</li>        <li id="second">2</li>        <li id="third">3</li>        <li id="fourth">4</li>    </ul>    <script>        $(function(){            var $item=$('<span>我是插入的</span>');            $("#second").prepend($item);        });    </script></body></html>

span行內元素標籤。
在這裡插入圖片描述.append()方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body>    <ul>        <li id="first">1</li>        <li id="second">2</li>        <li id="third">3</li>        <li id="fourth">4</li>    </ul>    <script>        $(function(){            var $item=$('<span>我是插入的</span>');            $("#second").append($item);        });    </script></body></html>

在這裡插入圖片描述

相關文章