search

Home >Web Front-end >JS Tutorial >How to add elements using the append method in jQuery

How to add elements using the append method in jQuery

不言
不言Original
2018-12-28 17:35:096331browse

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(‘添加的内容’);

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>

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!

php jquery html append 事件 选择器 ul li
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to create a module using Node.jsNext article：How to create a module using Node.js

Related articles

See more