zoukankan      html  css  js  c++  java
  • JS-DOM

    1、创建新的标签(可以规定在哪个标签前添加),添加内容

    变量不加“”,字符串加“” 

     1 <html lang="中文">
     2 <head>
     3     <meta charset="UTF-8">
     4     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     6     <title>jsDOM创建对象</title>
     7 </head>
     8 <body>
     9     <div id="parsent">
    10         <h3>122</h3>
    11         <!-- <p>这是一个js创建的p</p> -->
    12         <p id="chi">234</p>
    13         <p>345</p>
    14         <p id="child">456</p>
    15    
    16         <span id="sp1"></span><input type="text" id="te1">
    17         <button onclick="bian1()">点下加载<tton>
    18         <br>
    19         <span id="sp2"></span><input type="text" id="te2">
    20         <button onclick="bian2()">点下加载<tton>
    21     </div>
    22 
    23     <script type="text/javascript">
    24 
    25         var p=document.createElement("p"); //建个p标签
    26         var nodetext=document.createTextNode("这是一个js创建的p"); //给创建的标签创建内容
    27         p.appendChild(nodetext); //在创建的p标签中添加内容
    28         var parsent=document.getElementById("parsent"); /到父级
    29         var chi=document.getElementById("chi"); /到p标签的兄弟,准备在兄弟前添加
    30         parsent.insertBefore(p,chi); //在chi前添加p标签
    31         parsent.appendChild(p); //这样创建默认在最后添加  
    32        
    33         var parsent=document.getElementById("parsent"); //找到父级
    34         var child=document.getElementById("child"); //找到要删除的标签
    35         parsent.removeChild(child);  // 删除标签
    36 
    37         function bian1(){
    38             var te1=document.getElementById("te1"); 
    39             te1.value="zhangsan"; //添加内容 在input中直接.value=""
    40             var sp1=document.getElementById("sp1");
    41             sp1.innerHTML="用户名:"; //添加内容,用.innerHTML=""
    42         }
    43         function bian2(){
    44             var te2=document.getElementById("te2");
    45             te2.value="123456";
    46             var sp2=document.getElementById("sp2");
    47             sp2.innerHTML="密码:";            
    48         }   
    49     </script>
    50     
    51 </body>
    52 <html>

    2、

    先把字符串5取出来,然后++

     1 <html lang="en">
     2 <head>
     3     <meta charset="UTF-8">
     4     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     6     <title>Document</title>
     7 </head>
     8 <body>   
     9     <ul id="parsent">
    10         <li>我是1</li>
    11         <li>我是2</li>
    12         <li>我是3</li>
    13         <li>我是4</li>
    14     </ul>
    15     <button onclick="zeng()">增加</button>
    16     <button onclick="shan()">删除</button>
    17     
    18     <script>
    19         var x="我是5"; //字符串‘我是5’
    20 var temp=parsenInt(x.slice(2));//提取从位置 2开始的之后所有字符,然后parsenInt 转成数字
    21 function zeng(){
    22 x='我是'+temp++; ////因为temp++是先按temp原始值执行一次完毕后 在++
    23 var li=document.createElement('li');
    24 var nodetext=document.createTextNode(x);
    25 li.appendChild(nodetext);
    26 var parsent=document.getElementById("parsent");
    27
    parsent.appendChild(li);
    28 }
    29 function shan(){ 30 var parsent=document.getElementById("parsent"); 31 var lis=document.getElementsByTagName("li"); 32 parsent.removeChild(lis[lis.length-1]); 33 x='我是'+temp--; 34 } 35 </script> 36 </body> 37 </html>

    示例2:x=5,然后就执行完后再 x++

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title>jsDOM05</title>
     6 </head>
     7 <body>
     8 
     9 <ul id="par">
    10     <li>1</li>
    11     <li>2</li>
    12     <li>3</li>
    13     <li>4</li>    
    14 </ul>
    15 <button onclick="zeng()">在最后增加一个</button>
    16 <button onclick="shan()">删除最后一个</button>
    17 
    18 <script type="text/javascript">
    19     var x=5;
    20     function zeng() {        
    21         var par=document.getElementById("par");
    22         var li=document.createElement('li');
    23         var nodetext=document.createTextNode(x);
    24         li.appendChild(nodetext);
    25         par.appendChild(li);
    26         x++;
    27     }
    28     function shan() {
    29         var par=document.getElementById("par");
    30         var lis=document.getElementsByTagName('li');        
    31         par.removeChild(lis[lis.length-1]);
    32         x--;
    33     }
    34 
    35     window.confirm("你要学习java互联网架构吗?");
    36     window.prompt("观察prompt、基本不会使用,了解!");
    37 </script>
    38 </body>
    39 </html>

    3、

    4、

  • 相关阅读:
    【原创】主机不能访问虚拟机CentOS7中的站点
    phpStudy中MySQL版本升级到5.7.17方法
    phpStudy for Linux (lnmp+lamp一键安装包)
    Linux的wget命令详解【转载】
    重置密码解决MySQL for Linux错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
    mysql5.7密码过期ERROR 1862 (HY000): Your password has expired. To log in you must change
    电赛菜鸟营培训(二)——STM32F103CB之中断控制
    电赛菜鸟营培训(零)——Keil环境搭建
    电赛菜鸟营培训(一)——STM32F103CB之LED控制
    AppInventor学习笔记(四)——打地鼠应用学习
  • 原文地址:https://www.cnblogs.com/xiaoxiaoyu7/p/8601236.html
Copyright © 2011-2022 走看看