Home >Web Front-end >JS Tutorial >Detailed graphic explanation of how to create nodes and add nodes with jQuery
Detailed graphic explanation of how to create nodes and add nodes with jQuery
- yuliaOriginal
- 2018-10-12 14:41:374506browse
jQuery is a framework based on JavaScript. It is widely used because of its simplicity and convenience. Do you know how to create and add nodes with jQuery? This article will tell you how to create nodes and add nodes with jQuery. It has certain reference value. Interested friends can refer to it.
Note: When using jQuery, you must first introduce the jQuery file
Method 1, append() method
append() can add nodes and add them at the end of the selected element
Example: Add dragon fruit at the end of the unordered list This item
Description: First create a
- node. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>榴莲</li>
<li>西瓜</li>
<li>橘子</li>
<li>雪梨</li>
</ul>
<button id="btn">点击添加</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("ul").append(" <li>火龙果</li>");
});
});
</script>
</html>The effect is as shown in the figure:
Method 2, prepend() method
The prepend() method can add nodes, which are added to the beginning of the selected elements
Example: Add dragon fruit as the first element to the unordered list
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>榴莲</li>
<li>西瓜</li>
<li>橘子</li>
<li>雪梨</li>
</ul>
<button id="btn">点击添加</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("ul").prepend(" <li>火龙果</li>");
});
});
</script>
</html>The effect is as shown in the figure:
In addition, there are after() method and before() method. The after() method in jQuery inserts content after the selected element, and the before() method inserts content before the selected element. The essence is similar to append() and prepend(), and will not be demonstrated here.
The above introduces the method of creating nodes and adding nodes in jQuery. It is relatively simple. Interested friends can try the after() method and before() method by themselves. I hope you can master it as soon as possible. For more related tutorials, please visit jQuery Video Tutorial
The above is the detailed content of Detailed graphic explanation of how to create nodes and add nodes with jQuery. For more information, please follow other related articles on the PHP Chinese website!