JavaScript：createElement和insertBefore

obj = document.createElement(tag)创建一个标签，oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入的标签的父节点调用，appendChild将创建的元素依次加在后面，而insertBefore则可以将创建的特定插在特定元素element前面

  • 点击一下“创建LI”按钮，则HTML页面上增加一个<li>标签
  • 第一步：创建<li>
  • 第二步：添加<li>  两种方式

createElement和appendChild完整示例

<!DOCTYPE html>
<html>
<head>
	<title>learn js</title>
<style type="text/css">

</style>
<script type="text/javascript">
	window.onload = function(){
		var oBtn = document.getElementById('btn');
		var oUl = document.getElementById('ul1');
		oBtn.onclick = function(){
			var oDate = new Date();
			var oLi = document.createElement('li');
			oLi.style.backgroundColor = 'red';
			oLi.innerHTML = oDate;
			oUl.appendChild(oLi);
		}
	};
</script>
</head>

<body>
	<input id="btn" type="button" value="创建LI">
	<ul id="ul1"></ul>
</body>
</html>

createElement和insertBefore完整示例

<!DOCTYPE html>
<html>
<head>
	<title>learn js</title>
<style type="text/css">

</style>
<script type="text/javascript">
	window.onload = function(){
		var oBtn = document.getElementById('btn');
		var oUl = document.getElementById('ul1');
		var aLi = document.getElementsByTagName('li');
		oBtn.onclick = function(){
			var oDate = new Date();
			var oLi = document.createElement('li');
			oLi.style.backgroundColor = 'red';
			oLi.innerHTML = oDate;
			// oUl.appendChild(oLi);
			oUl.insertBefore(oLi,aLi[0]);
		}
	};
</script>
</head>

<body>
	<input id="btn" type="button" value="创建LI">
	<ul id="ul1"></ul>
</body>
</html>

 

posted @ 2020-02-09 17:58  昨夜昙花  阅读(8)  评论(0)    收藏  举报