创建和插入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)    收藏  举报