（22）使用DOM创建元素

最新推荐文章于 2021-02-10 14:16:18 发布

无人与我共黄昏

最新推荐文章于 2021-02-10 14:16:18 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript案例解析

本文链接：https://blog.youkuaiyun.com/Xuan6251237011/article/details/37937257

JavaScript案例解析同时被 3 个专栏收录

42 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

JavaScript代码

42 篇文章

订阅专栏

JavaScript

24 篇文章

订阅专栏

本文介绍如何通过JavaScript实现动态创建li元素。点击按钮后，将在页面下方生成新的li元素。若输入框有文本，内容将作为li节点的文本；无文本则创建空节点。使用appendChild方法实现元素的添加，如需从前往后插入，可以利用insertBefore方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求分析：点击“创建li”按钮，就会在下面创建一个li标签，如果同时在文本框中添加相应的文字信息将作为新添加li节点中的内容。

<!DOCTYPE HTML>
<!--
	DOM创建元素，①创建li，②再插入相应的父级中去
-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
	window.onload=function ()
	{
		var oBtn=document.getElementById('btn1');
		var oU1=document.getElementById('ul1');
		var oTxt=document.getElementById('txt1');
		oBtn.onclick=function ()
		{
		  var oLi=document.createElement('li');//创建了li子节点，但是并没有添加进去
		   oLi.innerHTML=oTxt.value;
		  oU1.appendChild(oLi);//父级.appendChild(子节点);添加子节点的方法
		};
	};

 </script>
</head>

<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>

<ul id="ul1">
</ul>
</b

了解本专栏

超级会员免费看