appendChild（）和insertBefore（）创建<li>

最新推荐文章于 2023-05-08 01:24:06 发布

原创最新推荐文章于 2023-05-08 01:24:06 发布 · 490 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用JavaScript操作DOM的具体案例，展示了如何通过JS创建并插入<li>元素到<ul>中，包括当<ul>为空时的处理方式。

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

<script type="text/javascript">
window.onload=function ()
{
 	var oBtn=document.getElementById('btn1');
	var oTxt=document.getElementById('txt1');
	var oUl=document.getElementById('ul1');
	
	oBtn.onclick=function()
	{
		var oLi=document.createElement('li');
		var aLi=document.getElementsByTagName('li');
		
		oLi.innerHTML=oTxt.value;
		if(aLi.length==0)//ul中没有li，需要先添加子节点
		{
			oUl.appendChild(oLi);
		}
		else
		{
			oUl.insertBefore(oLi,aLi[0]);
		}
		
	}

 }
</script>
</head>

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

</ul>
</body>