Home  >  Article  >  Web Front-end  >  Can jquery add elements to the page?

Can jquery add elements to the page?

WBOY
WBOYOriginal
2022-06-09 16:47:131787browse

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))

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>

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>");
});
});

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>");
});
});

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>");
    });
    });
Output result:

Can jquery add elements to the page?

Video tutorial recommendation:

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn