zoukankan      html  css  js  c++  java
  • createElement创建元素

    创建元素是用createElement,先把创建的元素赋值给一个变量,再把这个变量插入到文档元素中。末尾插入元素是用:appendChild   appendChild的形式是:父级.appendChild(子节点),把子节点插入到父级下的末尾。

    insertBefore:在父级之前插入子节点,形式:父级.insertBefore(子节点,在谁之前)

    removeChild:从父级删除一个子节点,形式父级.appendChild(removeChild)

    正常顺序插入Li 和倒序插入LI代码:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>倒序插入li</title>
     6 <script>
     7 window.onload=function()
     8 {
     9     var oTxt=document.getElementById('txt');
    10     var oBtn=document.getElementById('btn');
    11     var oBtn1=document.getElementById('btn1');
    12     var oUl=document.getElementById('ul');
    13     
    14     
    15     oBtn.onclick=function()
    16     {
    17         var oli=document.createElement('li');
    18         oli.innerHTML=oTxt.value;
    19         oUl.appendChild(oli);
    20     };
    21     
    22     oBtn1.onclick=function()
    23     {
    24         var oli=document.createElement('li');
    25         var ali=document.getElementsByTagName('li');
    26         oli.innerHTML=oTxt.value;
    27         if(ali.length>0)
    28         {
    29             oUl.insertBefore(oli,ali[0]);
    30         }
    31         else
    32         {
    33             oUl.appendChild(oli);
    34         }
    35     };
    36 };
    37 </script>
    38 </head>
    39 
    40 <body>
    41 <h1>正常顺序常插入li、倒序插入li</h1>
    42 <input type="txt" id="txt" />
    43 <input type="button" id="btn" value="正常顺序插入li" /> <input type="button" id="btn1" value="倒序插入li" /> 
    44 <ul id="ul"></ul>
    45 </body>
    46 </html>
  • 相关阅读:
    K2新网站(官网和BPM社区)正式上线了
    在线体验K2 BPM微信审批
    K2 BPM + SAP,实现全方面管理企业
    KStar ----BPM应用框架,K2 的新星
    SharePoint加K2,将Portal系统与BPM系统完美整合!
    迈瑞综合应用及流程管理平台项目
    深度学习教程网站
    Pytorch自定义参数层
    pytorch BCELoss和BCEWithLogitsLoss
    Some helper functions for PyTorch
  • 原文地址:https://www.cnblogs.com/52css/p/2944809.html
Copyright © 2011-2022 走看看