jQuery - 添加元素

最新推荐文章于 2023-03-10 14:51:41 发布

温文尔雅小禽兽

最新推荐文章于 2023-03-10 14:51:41 发布

阅读量151

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/weixin_42630877/article/details/83106618

版权

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

<!DOCTYPE html>
<html>
	<head>
		　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#pp").append(" <b> 这是添加的 </b>.");
  });

  $("#btn2").click(function(){
    $("#oo").append("<li>随便加点</li>");
  });
});
</script>
</head>

<body>
<p id="pp">这是原来的！</p>

<ol id="oo">
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ol>
<button id="btn1">点击添加</button>
<button id="btn2">追加列表项</button>
	</body>
</html>

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

<!DOCTYPE html>
<html>
	<head>
		　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#pp").prepend(" <b> 这是添加的 </b>.");
  });

  $("#btn2").click(function(){
    $("#oo").prepend("<li>随便加点</li>");
  });
});
</script>
</head>

<body>
<p id="pp">这是原来的！</p>

<ol id="oo">
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ol>
<button id="btn1">点击添加</button>
<button id="btn2">追加列表项</button>
	</body>
</html>