jQuery adding elements
With jQuery, it is easy to add new elements/content.
Adding new HTML content
We will learn four jQuery methods for adding new content:
append() - Insert content at the end of the selected elements
prepend() - Insert content at the beginning of the selected elements
after() - Insert content after the selected element
before() - Insert content before the selected element
jQuery append() method
jQuery append() method inserts content at the end of the selected element.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/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>Run the program and try it
jQuery prepend() method
jQuery prepend() method inserts content at the beginning of selected elements.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在開頭追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<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>Run the program to try it
Through append() and The prepend() method adds several new elements
In the above example, we only insert text/HTML at the beginning/end of the selected elements.
However, the append() and prepend() methods can receive an unlimited number of new elements through parameters. Text/HTML can be generated via jQuery (like in the example above), or via JavaScript code and DOM elements.
In the following example, we create several new elements. These elements can be created using text/HTML, jQuery or JavaScript/DOM. We then append these new elements to the text via the append() method (also valid for prepend()):
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>這是一個段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>Run the program and try it
jQuery after() and before() methods
jQuery after() method inserts content after the selected element.
The jQuery before() method inserts content before the selected element.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
</script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150">
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>Run the program to try it
Through after() and The before() method adds several new elements
The after() and before() methods can receive an unlimited number of new elements through parameters. New elements can be created via text/HTML, jQuery or JavaScript/DOM.
In the following example, we create several new elements. These elements can be created using text/HTML, jQuery or JavaScript/DOM. Then we insert these new elements into the text through the after() method (also valid for before()):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素
var txt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在圖片后添加文本
}
</script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150">
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>Run the program and try it
