013-jQuery HTML-添加元素

天又热了

于 2022-01-25 11:13:01 发布

阅读量418

点赞数

分类专栏： jQuery 文章标签： jquery html javascript

本文链接：https://blog.csdn.net/weixin_43404791/article/details/122681603

版权

jQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/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>");
				});
				$("#btn4").click(function(){
					$("img").before("<b>之前</b>");
				});
				$("#btn5").click(function(){
					$("img").after("<li>之后</li>");
				});
				
			});
			
		</script>
		<script>
			function appendText(){
				var txt1="<p>文本-1.</p>";//使用HTMl标签创建文本
				var txt2=$("<p></p>").text("文本-2.");//使用jQuery创建文本
				var txt3=document.createElement("p");
				txt3.innerHTML="文本-3";//使用DOM创建文本text
				$("body").append(txt1,txt2,txt3);//追加新元素
				$("ol").append(txt1,txt2,txt3);//追加新元素
			}
			function afterText(){
				var txt1="<b>I </b>";//使用HTML创建元素
				var txt2=$("<b></b>").text("love ");//使用jQuery创建元素
				var txt3=document.createElement("big");//使用DOM创建元素
				txt3.innerHTML="jQuery!";
				$("img").after(txt1, txt2, txt3);//在图片后添加文本
			}
		</script>
	</head>
	<!--
		jQuery-添加元素
			通过jQuery可以很容易地添加新元素内容
			- append()-在被选元素的结尾插入内容
			- prepend()-在被选元素的开头插入内容
			- after()-在被选元素之后插入内容
			- before()-在被选元素之前插入内容
		jQuery append()方法
			jQuery append()方法在被选元素的结尾插入内容(仍然在该元素内部)
			实例:
			$("#btn1").click(function(){
				$("p").append("<b>追加文本</b>");
			});
			$("#btn2").click(function(){
				$("ol").append("<li>追加列表项</li>");
			});
		通过append()和prepend()方法添加若干新元素
			在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML
			不过,append()和prepend()方法能够通过参数接收无限数量的新元素.
			可以通过jQuery来生成文本/HTML(就像上面的例子那样).或者通过JavaScript代码和DOM元素
			在下面的例子中,我们创建如果新的元素,这些元素可以通过text/HTML,jQuery或者javaScript/DOM来创建.
			然后我们通过append()方法把这些新元素追加到文本中(对prepend()同样有效)
			实例:
			function appendText(){
				var txt1="<p>文本-1.</p>";//使用HTMl标签创建文本
				var txt2=$("<p></p>").text("文本-2.");//使用jQuery创建文本
				var txt3=document.createElement("p");
				txt3.innerHTML="文本-3";//使用DOM创建文本text
				$("body").append(txt1,txt2,txt3);//追加新元素
				$("ol").append(txt1,txt2,txt3);//追加新元素
			}
		jQuery after()和before()方法
			jQuery after()方法在被选元素之后插入内容
			jQuery before()方法在被选元素之前插入内容
			实例:
			$("#btn4").click(function(){
				$("img").before("<b>之前</b>");
			});
			$("#btn5").click(function(){
				$("img").after("<li>之后</li>");
			});
		通过after()和before()方法添加若干新元素
			after()和before()方法能够通过参数接收无限数量的新元素.可以通过text/HTML,
			jQuery或者JavaScript/DOM来创建新元素.
			在下面的例子中,我们创建若干新元素.这些元素可以通过text/HTML,jQuery或者JavaScript/DOM来创建.
			然后我们通过after()方法把这些新元素插入到文本中(对before()同样有效):
			实例:
			
	-->
	<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>
		<p>这是一个段落.</p>
		<button id="btn3" onclick="appendText() ">追加文本</button><br>
		<img src="img/left.jpg" /><br>
		<button id="btn4">之前插入</button>
		<button id="btn5">之后插入</button><br>
		<img src="img/left.jpg" /><br>
		<button onclick="afterText()">之后插入</button>
	</body>
</html>

天又热了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
013-jQuery HTML-添加元素

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){
复制链接

扫一扫

专栏目录