1. 程式人生 > >JQuery學習筆記-新增元素

JQuery學習筆記-新增元素

在這裡,介紹4個常用的方法:

  1. append():在被選元素的結尾插入內容(仍然是元素內部);
  2. prepend():在被選元素的開頭插入內容(仍然是元素內部);
  3. after():在被選元素之後插入內容;
  4. before():在被選元素之前插入內容。
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>菜鳥教程</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style type="text/css">

		</style>
		<script>
			$(document).ready(function() {
				$("#btn1").click(function() {
					var txt1 = "<p>文字</p>";
					var txt2 = $("<p></p>").text("文字");
					var txt3 = document.createElement("p");
					txt3.innerHTML = "文字";
					$("body").append(txt1, txt2, txt3);
				});
				
				$("#btn2").click(function(){
					var txt4 = "<b>文字</b>";
					var txt5 = "<strong>文字</strong>";
					$("p").after(txt4,txt5);
				});
			});
		</script>
	</head>

	<body>

		<p>這是一個段落。</p>
		
		<br>
		<button id="btn1">追加文字</button>
		<button id="btn2">追加文字</button>

	</body>

</html>