zoukankan      html  css  js  c++  java
  • 创建元素节点,文本节点以及在指定位置增加节点

    no1、创建一个新的元素节点,并把它添加到body中

    1 window.onload = t;
    2 function t(){
    3    var nodeli = document.createElement('li');    
    4    document.body.appendChild(nodeli);
    5    nodeli.style.cssText = '300px;background:red;';
    6 }

    上面的显示效果为:

    no2、创建一个元素节点,创建一个文本节点,将文本节点追加到元素节点上,再将元素节点追加到body中。

    window.onload = t;
    function t(){
       var nodeli = document.createElement('li');//创建一个li节点    
       var li_text = document.createTextNode('文本节点');//创建一个文本节点
       nodeli.appendChild(li_text);//将文本节点追加到li节点上
       document.body.appendChild(nodeli); //将元素节点追加到body中
       nodeli.style.cssText = '300px;background:red;'; //设置元素节点的样式
    }

    no3、在指定位置插入节点insertBefore(参数1,参数2):

    第一个参数为要插入的心节点,第二个参数为已有的节点,就是插在谁的节点的前面。

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 <script>
     7 function t(){
     8   var nodeli = document.createElement('li'); //创建一个li节点    
     9   var li_text = document.createTextNode('文本节点'); //创建一个文本节点
    10   nodeli.appendChild(li_text);  //将文本节点追加到li节点上
    11   
    12   var nodeUl = document.getElementsByTagName('ul')[0];  //获取第一个ul节点
    13   var nodeli1 = nodeUl.getElementsByTagName('li')[2]; //这个表示永远在第三个之前插入。不管后面增加了多少次,每次都是从新的第三个开始插入。第一次是在秋天前插入,之后的都是最新的第三个节点前插入
    14   nodeUl.insertBefore(nodeli,nodeli1); //函数insertBefore()表示在哪个节点之前添加。第一个参数为要插入的新节点,第二个参数为已有节点。
    15 }
    16 </script>
    17 </head>
    18 
    19 <body>
    20 <ul>
    21 <li>春天</li>
    22 <li>夏天</li>
    23 <li>秋天</li>
    24 <li>冬天</li>
    25 </ul>
    26 <hr />
    27 <button onclick="t()">在指定位置增加节点</button>
    28 </body>
    29 </html>

    显示效果为:

  • 相关阅读:
    HDU-1215 七夕节 数论 唯一分解定理 求约数之和
    LightOJ-1259 Goldbach`s Conjecture 数论 素数筛
    [前端-动态数据可视化]横向柱状图的动态数据可视化
    CodeForces-722C Destroying Array 并查集 离线操作
    CodeForces-920E Connected Components? 广度搜索 双向链表 判断联通 大量重复节点的删除
    CodeForces-1007A Reorder the Array 贪心 田忌赛马
    POJ-3692 Kindergarten 二分图 最大团
    个人开发者做一款Android App需要知道的事情
    android各种组件的监听器
    留言处插入xss不弹框
  • 原文地址:https://www.cnblogs.com/hl-520/p/4243839.html
Copyright © 2011-2022 走看看