js案例之在末尾添加节点

最新推荐文章于 2021-10-22 17:58:05 发布

小蝌蚪找玛玛

最新推荐文章于 2021-10-22 17:58:05 发布

阅读量303

点赞数

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/weixin_44679832/article/details/89345702

版权

这篇博客详细介绍了如何使用JavaScript在DOM元素的末尾动态添加新的节点。通过示例代码，展示了添加节点的过程，并提供了相应的运行效果展示。

摘要由CSDN通过智能技术生成

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在末尾添加节点</title>
</head>
<body>
    <ol id="departments">
	<li>财务部</li>
	<li>人事部</li>
	<li>产品部</li>
    </ol>
    新增部门:<input type="text" id="newDepartment"/><br/>
    <input type="button" value="添加" onclick="addNode();"/>
    <script type="text/javascript">
	function addNode(){
			
	    // 1.获取id为departments的标签元素，即ol标签
	    var olTag = document.getElementById("departments");
			
	    // 2.创建li标签
	    var liTag = document.createElement("li");
			
	    // 3.获取文本框的值
	    var str = document.getElementById("newDepartment").value;
			
	    // 4.创建文本节点
	    var liText = document.createTextNode(

最低0.47元/天解锁文章

小蝌蚪找玛玛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js案例之在末尾添加节点

代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>在末尾添加节点</title></head><body> <ol id="departments"> <li>财务部</li...
复制链接

扫一扫