Home > Article > Web Front-end > How to add content to the end of div in jquery
How to add content to the end of div in jquery
- 青灯夜游Original
- 2022-04-27 19:47:073235browse
Add method: 1. Use append(), the syntax "$("div").append("content value")", you can insert the specified content at the end of the div; 2. Use appendTo() , the syntax "$("content value").appendTo("div")" can insert the specified content at the end of the div.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
There are two ways for jquery to add content to the end of a div:
append( ) method
appendTo( ) method
Note: Although the two methods appendTo( ) and append( ) have similar functions, they both insert to the "end" of the selected element. content, but the operating objects of the two are reversed.
1. Use the append() method
Syntax:
$(A).append(B)
means going to the end of A Insert B.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").append("这是往div末尾增加的新文本内容");;
});
});
</script>
</head>
<body>
<div style="height:100px;background-color:yellow">
这是一些文本。
<p>这是div块中的一个p段落。</p>
</div><br>
<button>往div末尾增加内容</button>
</body>
</html>
##2. Use the appendTo() method
Syntax:$(A).appendTo(B)
- means inserting A into the end of B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("<span style='color:pink;'>这是一个新增的span元素</span>").appendTo("div");;
});
});
</script>
</head>
<body>
<div style="height:100px;background-color:yellow">
这是一些文本。
<p>这是div块中的一个p段落。</p>
</div><br>
<button>往div末尾增加内容</button>
</body>
</html>
jQuery video tutorial, web front-end video】
The above is the detailed content of How to add content to the end of div in jquery. For more information, please follow other related articles on the PHP Chinese website!