insertBefore

最新推荐文章于 2022-11-22 15:25:59 发布

natsu_12

最新推荐文章于 2022-11-22 15:25:59 发布

阅读量464

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/u012351851/article/details/40536469

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		//appendChild(子节点)  在父级调用，添加到末尾
		//insertBefore(子节点，在谁之前)
		window.οnlοad=function() {
			var oTxt=document.getElementById('txt1');
			var oBtn=document.getElementById('btn1');
			var oUl=document.getElementById('ul1');
			oBtn.οnclick=function() {
				var oLi=document.createElement('li');
				var aLi=oUl.getElementsByTagName('li');
				oLi.innerHTML=oTxt.value;
				/*oUl.insertBefore(oLi, aLi[0]);*/  //在空数组中找第一个是找不到的，IE下会报错

				if(aLi.length > 0) {
					oUl.insertBefore(oLi, aLi[0]);
				} else {
					oUl.appendChild(oLi);
				}
			};
		}
	</script>
</head>
<body>
	<input type="text" id="txt1">
	<input type="button" id="btn1" value="创建li">
	<ul id="ul1"></ul>
</body>
</html>