Detailed explanation of jQuery's method of dynamically adding divs and setting attribute values

jQuery is a fast and concise JavaScript library. It is necessary for building interactive web pages, with ease of use, flexibility and scalability. In web development, dynamically adding div elements is a common requirement. This article will introduce how to use jQuery to dynamically add divs and set attribute values.

1. Preparation

Before using jQuery, you need to introduce the jQuery library into the HTML file. In this example, we will use jQuery 3.5.1 version:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Dynamically add div

In jQuery, you can use the append() method to dynamically add elements. This method accepts a parameter that specifies the content to add. Can be HTML markup, DOM element, text or jQuery object.

For example, we can use the following code to add a div to the body element:

$("body").append("<div>这是一个新的div</div>");

In the above code, we use the $() function to select the body element and use the append() method to add a div New div element. The added content string can be any HTML markup or plain text.

If you want to add multiple elements dynamically, you can put them in a string and separate them with commas. For example:

$("body").append("<div>这是第一个div</div>, <div>这是第二个div</div>");

This will add two div elements inside the body element.

3. Set the attribute value

Once a new div element is added, you can use the attr() method to set the attribute value. The attr() method accepts two parameters, the first parameter is the name of the attribute to be set, and the second parameter is the attribute value. For example:

$("body").append("<div>这是一个新的div</div>");
$("div").attr("id", "new-div");

The above code will set the id attribute for the newly added div element and set its value to "new-div".

You can use the prop() method to set the value of a Boolean attribute, for example:

$("input").prop("checked", true);

The above code sets the checked attribute of all input elements to true.

In addition to using the attr() and prop() methods, you can also use the css() method to set CSS property values. For example, you can set the background color of the newly added div element to blue:

$("div").css("background-color", "blue");

Use the css() method to set any CSS properties, including color, font, size, border, etc.

4. Complete sample code

The following is a complete sample code, which dynamically adds two div elements and sets their id attributes and background color:

    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("body").append("<div>这是第一个新的div</div>");
            $("body").append("<div>这是第二个新的div</div>");
            $("div").eq(0).attr("id", "div1").css("background-color", "blue");
            $("div").eq(1).attr("id", "div2").css("background-color", "green");
        });
    </script>

In the above code, we use the $(document).ready() function to ensure that the JavaScript code is executed after the page is fully loaded. We first added two new div elements inside the body element and then used the eq() method to select one of them. Finally, we use the attr() method to set the id attribute of div1, and use the css() method to set the background color to blue. Then select the div2 element, use the attr() method to set its id attribute, and use the css() method to set the background color to green.

5. Summary

It is a common requirement to dynamically add div elements and set attribute values ​​in jQuery. We can use the append() method to add new div elements, and the attr(), prop(), and css() methods to modify the element's attributes and styles. In order to keep the code readable and maintainable, it is recommended to put the JavaScript code in a separate file and reference it in the HTML file.

The above is the detailed content of Detailed explanation of jQuery's method of dynamically adding divs and setting attribute values. For more information, please follow other related articles on the PHP Chinese website!