DOM(2)

最新推荐文章于 2022-07-25 19:00:30 发布

叹！

最新推荐文章于 2022-07-25 19:00:30 发布

阅读量96

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_44721518/article/details/111242914

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul id="ul">   
		    <li id="l" class="12">1111</li>
		    <li>2222</li>
		    <li>3333</li>
		    <li>4444</li>
		            
		</ul>
	</body>
	<script>
	#第一步创建元素节点
		 let p = document.createElement("p");
     #第二部创建文本节点
	     let text = document.createTextNode("第一个p标签");
	     #第三步将文本节点放在元素节点之后
		 p.appendChild(text);
		 #第四步设置相关属性，由于是内联样式，故注意格式。
		 p.setAttribute("style","color: blue;font-size: 50pt;");
		 #第五步将元素节点插入父节点中。
		 let i= document.getElementById("ul");
		 let li= document.getElementById("l");
		 i.insertBefore(p,li);
	    
	</script>
</html>

在这里插入图片描述
也可通过以下方法加入属性。

var hr=document.createElement("hr");                 
var hrcolor= document.createAttribute ("color"); 
hrcolor.value = "red";      
           
hr.setAttributeNode(hrcolor);                                 
document.body.appendChild(hr);