创建和插入DOM节点

<title>创建和插入DOM节点</title>
<link rel="stylesheet" href="" type="text/css">
<script type="text/javascript"src=""></script>

<!--插入节点
我们获得了某个DOM节点,假设这个DOM节点是空的,我们通过innerHTML 就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖。
追加-->
</head>
<body>

<!-- <p id="newp"></p>-->

<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>

var js = document.getElementById("js");//已存在的节点
var list = document.getElementById("list");
/*如下控制台操作
list.appendChild(js)//追加到后面
<p id=​"js">​JavaScript​</p>​
*/

<!-- 通过JS创建一个新的节点-->
var newp = document.createElement('p');//创 建一个p标签
// newp.setAttribute('id','newp')
newp.id = 'newp';
newp.innerText ='Hello,Kuangshen';
//创建一个标签节点(通过这个属性,可以设置任意的值)
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
//设置里面有两个值 一个是key 一个是value。 按照上面的操作就是可以将特殊link和script的动态的key和值写出来,万能
/*如下控制台操作
list.appendChild(myScript);
<script type="text/javascript">
*/
//创建一个style标签
var myStyle = document.createElement('style');//创建了一个空style标签ui
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{//设置标签内容

document.getElementsByTagName('head')[0].appendChild(myStyle)
// 插到前面

</script>
posted @ 2022-05-31 21:34  LiLime  阅读(107)  评论(0)    收藏  举报