zoukankan      html  css  js  c++  java
  • HTML DOM 07 创建节点

     示例 1 : 

    创建元素节点

    通过createElement 创建一个新的元素节点
    接着把该元素节点,通过appendChild加入到另一个元素节点div1中

    <html>
    <div id="d">Hello HTML DOM</div>
    <script>
    function add(){
      var hr=document.createElement("hr");
      var div1 = document.getElementById("d");
      div1.appendChild(hr);
    }
    </script>
     
    <button onclick="add()">在div中追加一个hr元素</button>
     
    </html>

     示例 2 : 

    创建文本节点

    首先创建一个元素节点p (p是p标签,不是随便命名的变量名)
    接着通过createTextNode创建一个内容节点text
    把text加入到p
    再把p加入到div

    <html>
    <div id="d">Hello HTML DOM</div>
    <script>
    function add(){
     
      var p=document.createElement("p");
      var text = document.createTextNode("这是通过DOM创建出来的<p>");
      p.appendChild(text);
     
      var div1 = document.getElementById("d");
      div1.appendChild(p);
     
    }
    </script>
      
    <button onclick="add()">在div中追加一个p元素</button>
      
    </html>

    示例 3 : 

    创建属性节点

    首先创建一个元素节点a
    接着创建一个内容节点content
    把content加入到a
    然后通过createAttribute创建一个属性节点 href
    设置href的值为http:12306.com
    通过setAttributeNode把该属性设置到元素节点a上
    最后把a加入到div

    <html>
    <div id="d">Hello HTML DOM<br></div>
     
    <script>
    function add(){
      
      var a=document.createElement("a");
      var content = document.createTextNode("http://12306.com");
      a.appendChild(content);
     
      var href = document.createAttribute("href");
      href.nodeValue="http://12306.com";
      a.setAttributeNode(href);
     
      var div1 = document.getElementById("d");
      div1.appendChild(a);
    }
    </script>
       
    <button onclick="add()">在div中追加一个超链</button>
       
    </html>

  • 相关阅读:
    控制TABLE的一些属性
    windows7中各个dll文件作用和用途
    left join on and与left join on where的区别
    号外,left join比连表语句快80倍
    JS跳转语句
    [jQuery,Dojo,MooTools]
    CYQ.Data 数据框架 V3.5 开源版本发布(源码提供下载)
    Scala开发小小总结
    性能测试工具原理与架构
    joomla1.5模块开发和插件开发详解带实例
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/13379088.html
Copyright © 2011-2022 走看看