How to add elements using the append method in jQuery-JS Tutorial-php.cn

How to add elements using the append method in jQuery

不言

Release： 2018-12-28 17:35:09

Original

6293 people have browsed it

The append method is a method that can dynamically add html elements. It is very convenient to use the append method. You can add any number of lines of html elements. In this article, we will introduce how to add elements using the append method.

How to add elements using the append method in How to add elements using the append method in How to add elements using the append method in jQuery

How to use the append method?

$(‘选择器’).append(‘添加的内容’);

Copy after login

After specifying the class and ID in the selector, call append and specify what to add.

Let’s look at a specific example

Add the li element in the ul tag by clicking the button, the code is as follows

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(function() {
        $("button").click(function() {
          $("ul").append("<li>添加的内容</li>");
        });
      });
    </script>
  </head>
  <body>
    <button>button</button>
    <ul>
    </ul>
  </body>
</html>

Copy after login

Create an event to be triggered when the button is clicked , and then execute the append method in it.

Write an append method for the selector, specify the ul tag and add the li tag to the selector.

So every time the button is pressed, the append method is called and the number of elements is incremented.

The display effect on the browser is as follows

How to add elements using the append method in How to add elements using the append method in How to add elements using the append method in jQuery

#When the button button is clicked, a piece of content will appear every time it is clicked. The effect of five clicks is as follows:

How to add elements using the append method in How to add elements using the append method in How to add elements using the append method in jQuery

This article ends here. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to add elements using the append method in jQuery. For more information, please follow other related articles on the PHP Chinese website!