Can jquery add elements to the page?-Front-end Q&A-php.cn

Can jquery add elements to the page?

WBOY

Release： 2022-06-09 16:47:13

Original

1830 people have browsed it

jquery can add elements to the page. Adding method: 1. Use "Element Object.append("Insert Content")" to add elements at the end of the element; 2. Use "Element Object.prepend("Insert Content")" to add elements at the beginning of the element; 3. Use "Element object.after("Insert content")" adds elements after the selected element; 4. Use "Element object.before("Insert content")" to add elements after the selected element.

Can jquery add elements to the page?

The operating environment of this tutorial: windows10 system, jquery3.4.1 version, Dell G3 computer.

Can jquery add elements to the page

Can jquery add elements to the page

append() - Insert content at the end of the selected element

$(selector).append(content,function(index,html))

Copy after login

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>插入文本</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>插入项</li>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落</p>
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
<button id="btn1">插入文本</button>
<button id="btn2">插入列表项</button>
</body>
</html>

Copy after login

Output result:

Can jquery add elements to the page?

prepend() - Insert content at the beginning of the selected element

Examples are as follows:

$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend(" <b>插入文本</b>.");
});
$("#btn2").click(function(){
$("ol").prepend("<li>插入项</li>");
});
});

Copy after login

Output result:

Can jquery add elements to the page?

after() - Insert content after the selected element

$(document).ready(function(){
$("#btn1").click(function(){
$("p").after(" <b>插入文本</b>.");
});
$("#btn2").click(function(){
$("ol").after("<li>插入项</li>");
});
});

Copy after login

Output result:

Can jquery add elements to the page?

##before() - Insert content before the selected element

$(document).ready(function(){
$("#btn1").click(function(){
$("p").before(" <b>插入文本</b>.");
});
$("#btn2").click(function(){
$("ol").before("<li>插入项</li>");
});
});

Copy after login

Can jquery add elements to the page?

jQuery video tutorial

The above is the detailed content of Can jquery add elements to the page?. For more information, please follow other related articles on the PHP Chinese website!