jQuery添加元素与实例

jQuery中的添加元素是用来在文档中添加内容的。用来添加内容的方法如下。

append()。在所选元素的末尾插入内容。
prepend()。在所选元素的开头插入内容。
after()。在选定的元素之后插入内容。
before()。在选定的元素之前插入内容。

使用append()方法： jQuery中的append()方法是用来在所选元素的末尾添加一个新的元素。

语法:

$(selector).append("element_to_be_inserted")

参数：该方法接受需要插入的单个参数元素。

返回值：它不返回任何东西。

例子：这个例子使用append()方法来添加新元素。

<html>
    <head>
        <title>Append Elements</title>
    <head>
      
    <body>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
          
        <button type="button" id="add_li" name="Add">
            Add List
        </button>
          
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
          
        <!-- Script to use append method to add list -->
        <script type="text/javascript">
             $(document).ready( function() {$ ("#add_li").click( function() {
                    $("ol").append("<li></li>")
                })
            })
        </script>
    </body>
</html>

输出:
jQuery添加元素与实例

使用prepend()方法： jQuery中的prepend()方法是用来在所选元素的开头添加一个新元素。

语法:

$(selector).prepend("element_to_be_inserted")

参数：该方法接受单个参数，该参数将作为参数插入DOM中。

返回值：它不返回任何值。

例子：这个例子使用predpend()方法来添加一个新的段落。

<!DOCTYPE html>
<html>
  
<head>
    <title>
        prepend() method
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
<head>
  
<body>
   
    <div id="container">
        <p id="p-first">The first paragraph</p>
        <p id="p-second">The second paragraph</p>
        <p id="p-third">The third paragraph</p>
    </div>
   
    <button type="button" id="add_p" name="Add Elements">
        Add Element
    </button>
      
    <!-- Script to use prepend() method to add elements-->
    <script type="text/javascript">
         $(document).ready( function() {$ ("#add_p").click( function() {
                $("#container").prepend("<p>prepended paragraph</p>")
            })
        })
    </script>
      
    Prepend
    </body>
</html>

输出:
jQuery添加元素与实例

使用after方法： jQuery中的after()方法用于在选定的元素之后插入内容。

语法:

$(selector).after("element_to_be_inserted")

参数：该方法接受一个单一的参数，用来作为参数插入到DOM中。

返回值：它不返回任何东西。

例子：这个例子使用after()方法在geeksforgeeks图片后面添加一个词。

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Add Elements using after() method
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
<head>
  
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190222001705/images1.png"
    alt="jQuery" width="100" height="140"><br><br>
      
    <button id="btn1">Insert After</button>
   
    <!-- Script to use after() method to append content -->
    <script type="text/javascript">
         $(document).ready( function() {$ ("#btn1").click(function() {
                $("img").after("<i>After</i>");
            });
        })
    </script>
</body>
  
</html>

输出:
jQuery添加元素与实例

使用before方法： jQuery中的before()方法是用来在选定的元素之前插入内容。

语法:

$(selector).before("element_to_be_inserted")

参数：该方法接受一个单一的参数，用来作为参数插入到DOM中。

返回值：它不返回任何东西。

例子：这个例子使用before方法在geeksforgeeks图片前添加元素。

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Add Element using before() method
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
<head>
  
<body>
      <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190222001705/images1.png" 
    alt="jQuery" width="100" height="140"><br><br>
      
    <button id="btn1">Insert before</button>
      
    <!-- Script to use before() method to add element -->
    <script type="text/javascript">
         $(document).ready( function() {$ ("#btn1").click(function() {
                $("img").before("<i>Before</i>");
            });
        })
    </script>
</body>
  
</html>

输出:
jQuery添加元素与实例