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、
