jQuery元素操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/AllenWalker1936/article/details/89153831

jQuery添加元素

方法

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

代码

<!doctype html>
	<head>
	<title>jq添加元素</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#bt1").click(function(){
				$("p").append("<b>hello world!</b>");
			});
			$("#bt2").click(function(){
				$("#ul1").append("<li>hello world!</li>");
			});
			$("#bt3").click(function(){
				$("p").prepend("<b>hello world!</b>");
			});
			$("#bt4").click(function(){
				$("#ul1").prepend("<li>hello world!</li>");
			});
			$("#bt5").click(function(){
				$("#div1").after("<b>hello world!</b>");
			});
			$("#bt6").click(function(){
				$("#div1").before("<b>hello world!</b>");
			});
			$("#bt7").click(function(){
				var t1="<b>hello world1!</b>";//通过HTML创建
				var t2=$("<b></b>").text("hello world2!");//通过jQuery创建
				var t3=document.createElement("b");
				t3.innerHTML="hello world3!";//通过DOM创建
				$("body").append(t1,t2,t3);//输出
			});
		});	
	</script>
	</head>

	<body>
		<p>这是一个段落</p>
		<ul id="ul1">
			<li>1</li>
			<li>2</li>
		</ul>
		<div id="div1" style="background:red;width:100px;height:100px"></div>
		<input type="button" id="bt1" value="在尾部追加文本">
		<input type="button" id="bt2" value="在尾部追加列">
		<br>
		<input type="button" id="bt3" value="在开头追加文本">
		<input type="button" id="bt4" value="在开头追加列">
		<br>
		<input type="button" id="bt5" value="在红方块后方追加文本">
		<input type="button" id="bt6" value="在红方块前方追加文本">
		<br>
		<input type="button" id="bt7" value="三种形式添加文本">
	</body>
</html>