jQuery - Add elements


jQuery - Adding Elements

With jQuery, it is easy to add new elements/content.

Add new HTML content

We will learn four jQuery methods for adding new content:

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

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

  • 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 .

Instance

<!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>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

jQuery prepend() method

jQuery prepend() method in Insert content at the beginning of the selected element.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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 Instance»

Click the "Run Instance" button to view the online instance

##Add several new elements through the append() and prepend() methods

In the above example, we only insert text/HTML at the beginning/end of the selected element.

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>菜鸟教程(runoob.com)</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 标签创建文本
	var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
	var txt3=document.createElement("p");
	txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
	$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>

<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>

</body>
</html>

Run Example»Click the "Run Example" button to view the online example

##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="/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>


Run Instance»

Click the "Run Instance" button to view the online instance

##Add several new elements through the after() and before() methods

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

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText(){
	var txt1="<b>I </b>";                    // 使用 HTML 创建元素
	var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
	var txt3=document.createElement("big");  // 使用 DOM 创建元素
	txt3.innerHTML="jQuery!";
	$("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}
</script>
</head>
<body>

<img src="/images/logo.png" >
<br><br>
<button onclick="afterText()">之后插入</button>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance