Can jquery add elements to the page?

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.

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:

这是一个段落。
这是另一个段落

列表项 1
列表项 2
列表项 3

插入文本
插入列表项

Output result:

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

Examples are as follows:

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

Output result:

• after() - Insert content after the selected element

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

Output result:

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

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

Copy after login
Output result:



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!