Javascript—操作HTML（2）

代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
      <div id="divname">
          <p id="pname">落叶归根是真的真的好听</p>
      </div>
      <script>
          function createNode() {
              var position = document.body;
              // 获取插入元素的位置
              var elementType = document.createElement("input");
              //创建元素，设置元素的类型
              elementType.type = "button";
              //设置元素的类型
              elementType.value = "确定";
              //按钮显示的内容
              position.appendChild(elementType);
              //在body后追加子节点
          }
          createNode();
      </script>
<!--创建元素节点，通过追加的方式确定位置-->

      <script>
          function precisePosition() {
              var fatherNode = document.getElementById("divname");
              //所要创建节点的父节点
              var childNode = document.getElementById("pname");
              //同一个父节点下，想要添加在哪个位置前面
              var newNode = document.createElement("p");
              //添加的节点类型
              newNode.innerHTML = "我不骗你";
              //p元素的内容
              fatherNode.insertBefore(newNode,childNode); 
              //第一个属性，想要添加的函数名，第二个想要添加在哪个位置之前    
          }
          precisePosition();
      </script>
<!--精确位置添加节点-->

      <script>
            function getSize() {
                var width = document.documentElement.offsetWidth;
                //获取网页宽度
                var height = document.documentElement.scrollHeight;
                //获取网页高度    
                alert("高度为"+height+","+"宽度为"+width);
            }
           getSize();
      </script>
<!--offsetXXX获取网页的宽度高度等，不包含滚动条-->
<!--scrollXXX获取网页的宽度高度等，含滚动条-->
</body>
</html>
效果：
Javascript—操作HTML（2）

猜你喜欢
