Simple and easy-to-understand jQuery div element adding techniques

jQuery is one of the commonly used JavaScript libraries in front-end development. It provides a convenient way to operate DOM elements. It can quickly realize functions such as adding, deleting, and modifying page elements. When using jQuery, we often need to operate div elements. The following will introduce some simple and easy-to-understand techniques for adding div elements and provide specific code examples.

1. Create and add a new div element

To create a new div element through jQuery and add it to the page, you can use the createElement method andappend method.

// 创建一个新的 div 元素
var newDiv = $("<div></div>");

// 添加到页面中
$("body").append(newDiv);

Copy after login

The above code first creates a new div element through $("<div></div>"), and then uses the append method Add it to the page within the <body> element.

2. Add child elements to an existing div element

If you need to add a child element to an existing div element, you can use append or prepend method.

// 在 id 为 "parentDiv" 的 div 元素中添加一个新的子元素
$("#parentDiv").append("<p>这是一个新的子元素</p>");

Copy after login

The above code adds a new  element to the div element with the id "parentDiv".

3. Add styles to div elements

To add styles to a div element, you can use the css method.

// 为 id 为 "myDiv" 的 div 元素添加样式
$("#myDiv").css({
    "background-color": "lightblue",
    "padding": "10px"
});

Copy after login

The above code sets the background color of the div element with the id "myDiv" to light blue and sets the padding to 10px.

4. Dynamically modify the content of a div element

To dynamically modify the content of a div element, you can use the html or text method.

// 修改 id 为 "contentDiv" 的 div 元素的内容
$("#contentDiv").html("<p>这是新的内容</p>");

Copy after login

The above code replaces the content of the div element with the id "contentDiv" with a new  element.

Through the above simple and easy-to-understand jQuery div element adding techniques, we can easily operate the div elements in the page and achieve the desired effects. I hope the above content can be helpful to your work in front-end development.

The above is the detailed content of Simple way to add div elements with jQuery. For more information, please follow other related articles on the PHP Chinese website!