JavaScript DOM增删插的基本操作_js的dom元素操作插入删除-优快云博客

本文详细介绍了如何使用JavaScript进行DOM操作，包括元素的创建、插入、删除和替换等基本操作，并展示了如何利用innerHTML和innerText来更新元素内容，以及如何通过setAttribute和getAttribute来设置和获取元素属性。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<span></span>
			<p></p>
			<strong></strong>
			<i></i>
		</div>
		<script type="text/javascript">
			//获取元素
			var div = document.getElementsByTagName('div')[0];
			var span = document.getElementsByTagName('span')[0];
			var p = document.getElementsByTagName('p')[0];
			var strong = document.getElementsByTagName('strong')[0];
			var i = document.getElementsByTagName('i')[0];
			
			//increase创建元素
			var iE1 = document.createElement('ii1');  				//创建元素
			var iE2 = document.createElement("ii2");
			var iE3 = document.createElement("ii3");
			var iTN = document.createTextNode("TextNode"); 			//创建文本
			var iC = document.createComment("i am notes");  		//创建注释
			var iDF = document.createDocumentFragment('ii'); 		//创建文档碎片节点
			
			//push插入操作
			div.appendChild(iE1); 					//括号内不填字符串，在父级元素里插入元素
			div.insertBefore(iE2, strong);			//在父级元素里插入元素iE，iE元素插入在strong元素前；
			
			//delete删除操作
			div.removeChild(span);					//括号填子元素，移除该元素并返回该元素
			p.remove();      						//删除自己，返回undefine
			
			//replace代替操作
			div.replaceChild(iE3, i);				//父级元素里的origin元素被newEle元素代替，返回origin
			
			/****/
			strong.innerHTML;						//返回div的内容，包括文本和标签
			strong.innerHTML = 'text';				//text覆盖div里的内容，包括原有的元素也会被覆盖为该文本
			strong.innerHTML += 'text';				//在div里的内容后加text
			
			// strong.innerText;						//返回div的文本内容
			// strong.innerText = 'text';				//text覆盖div里的内容
			
			strong.setAttribute('class','demo'); 			//在div里加一个class的行间属性，class = 'demo'
			strong.getAttribute('class'); 					//查找div行间属性里的class，返回class的内容
		</script>		
	</body>
</html>