Home > Article > Web Front-end > Dynamically add tags to divs using jQuery

Dynamically add tags to divs using jQuery

王林Original: 2024-02-24 10:51:08660browse

In web development, jQuery is a commonly used JavaScript library that greatly simplifies DOM manipulation and event handling. By flexibly using jQuery, we can easily dynamically add tags in divs and improve the user interaction experience. Next, we will introduce how to use jQuery to achieve this function, with specific code examples.

First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or the jQuery library file can be downloaded locally. After introducing jQuery, you can start writing code to dynamically add tags.

The sample code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实现div中标签的动态添加</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .container {
    width: 80%;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
  }
  button {
    padding: 10px 20px;
    margin: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<div class="container">
  <button id="addButton">点击添加标签</button>
</div>

<script>
$(document).ready(function() {
  $('#addButton').click(function() {
    $('.container').append('<p>动态添加的标签</p>');
  });
});
</script>
</body>
</html>

In this code, we create a div container that contains a button. When the button is clicked, jQuery will add a new p tag to the container. In this way, we implement the function of dynamically adding tags in divs.

Through jQuery's selectors and event handling functions, we can easily achieve various dynamic effects and add more interactivity and appeal to web pages. I hope the above example can help you better understand how to flexibly use jQuery to dynamically add tags in divs.

The above is the detailed content of Dynamically add tags to divs using jQuery. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery html 事件 dom 选择器

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：What are the basic data types of JS?Next article：What are the basic data types of JS?

See more

Dynamically add tags to divs using jQuery

Related articles