5 JS 和 Jquery 插入标签元素

最新推荐文章于 2024-06-02 17:09:56 发布

集电极

最新推荐文章于 2024-06-02 17:09:56 发布

阅读量1.4k

点赞数 1

分类专栏： # javascript 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_38463737/article/details/126428837

版权

javascript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

5 JS 和 Jquery 插入标签元素

在处理前端网页时，会遇到在网页中添加新标签内容，最常见的就是添加列表 li 和表格的一行 tr 。

而在添加之前如果需要使用js对标签内容字符串进行添加属性等操作，需要先把字符串转为 js 对象再处理。html文本字符串转 jqurey 或 DOM js操作对象

jquery:常用 $().append()

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

<body>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加列表项</button>
<script>
  $("#btn1").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
</script>
</body>

原生js

<body>
	<script>
	var Ul = document.createElement("ul") //创建一个ul
	document.body.appendChild(Ul)//将ul添加到body下面

	var li1 = document.createElement("li")//创建一个li标签
	var li2 = document.createElement("li")
	var li3 = document.createElement("li")
	Ul.appendChild(li1)//把li添加到ul下面作为子元素
	li1.id = "id1"//给li添加一个id
	li1.innerHTML = "这是第一个li"
	Ul.appendChild(li2)
	li2.id = "id2"//给li添加内容
	li2.innerHTML = "这是第二个li"
	Ul.appendChild(li3)
	li3.id = "id3"
	li3.innerHTML = "这是第三个li"
	</script>
</body>

参考;jQuery 添加元素 (w3school.com.cn)

集电极

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
5 JS 和 Jquery 插入标签元素

而在添加之前如果需要使用js对标签内容字符串进行添加属性等操作，需要先把字符串转为。jQuery append() 方法在被选元素的结尾插入内容。//把li添加到ul下面作为子元素。//将ul添加到body下面。//给li添加一个id。//创建一个li标签。
复制链接

扫一扫

专栏目录