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>

猜你喜欢

转载自blog.csdn.net/qq_41700374/article/details/84324647