• 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>
  • 相关阅读:
    【log】AOP配置日志
    【AOP】【log】Spring AOP 完成日志记录
    【java】staitc
    【spring】Spring3注释装配的最佳实践持久层
    【LDA】lda模型和java代码
    【tomcat】tomcat使用jndi,hibernate自动生成的DAO类用了jndi
    【spring】Spring基于 Annotation 的简单介绍
    【bayes】贝叶斯学派和频率学派
    【phi】balance
    【spring】【log】spring mvc 中使用log4j
  • 原文地址:https://www.cnblogs.com/52css/p/2944809.html
Copyright © 2020-2023  润新知