JavaScript中Script标签位置对DOM操作的影响及增删改实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    //加载顺序：1DOM元素加载 2图片加载
    //1等待DOM和图片资源加载完成之后才调用window.onload后面的方法
    //2事件覆盖事件，也即同时存在多个window.noload时，后面的覆盖前面的
    window.onload=function () {
      // var oBtn=document.getElementById('btn');
      // console.log(oBtn);
      function $(idName){
        return document.getElementById(idName);
      }
      $('btn').onclick=function(){
　　　　　　　　。。。。。。
      };
    }
  </script> <!--没有操作DOM时可以将script放在这里面，如果要使用DOM的相关操作，使用window.onload，建议最好写在body里面-->
</head>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button id="btn">追加</button>
<button id="del">删除</button>
<div id="box">
  <p>测试段落</p>
</div>
  <script>
    //加载顺序：1DOM元素加载 2图片加载
    //1等待DOM和图片资源加载完成之后才调用window.onload后面的方法
    //2事件覆盖现在，同时存在多个window.noload时，后面的覆盖前面的
    window.onload=function () {
      // var oBtn=document.getElementById('btn');
      // console.log(oBtn);
      function $(idName){
        return document.getElementById(idName);
      }
      $('btn').onclick=function(){
        //1DOM的创建
        var oP=document.createElement('p');
        //2 DOM的追加
        $('box').appendChild(oP);
        //3 DOM的修改
        oP.innerText='alex';
        oP.id='p1';//设置id
        var oA=document.createElement('abc');//自定义创建
        oA.innerText='321';
        oA.id='abc';
        $('box').insertBefore(oA,oP);//在oA之前插入
      };
      //4 DOM的删除操作
      $('del').onclick=function(){
        $('box').removeChild($('p1'));
        $('box').removeChild($('abc'));
      }
    }
  </script>
</body>
</html>