JavaScript兩種創建標簽的的方法，實現點擊按鈕讓text自增
阿新 • • 發佈：2018-06-18
IV 類型 attribute ima char AD 第一個 圖片 ava
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" onclick="AddEle1()" value="+"> 9 <input type="button" onclick="AddEle2()" value="++"> 10 11<div id="i1"></div> 12 13 <script> 14 15 function AddEle1() {
//字符串的方式 16 // 創建標簽 17 // 將標簽添加到i1裏面 18 var tag = "<p><input type=‘text‘></p>";
//註意第一個參數只能是“beforeBegin”,"afterBegein","beforeEnd","afterEnd"分別代表插入的位置
19 document.getElementById(‘i1‘).insertAdjacentHTML("beforebegin",tag);20 } 21 22 function AddEle2() {
//面向對象的方式 23 // 創建標簽 24 // 將標簽添加到i1裏面 25 var tag = document.createElement(‘input‘);//創建input標簽 26 tag.setAttribute(‘type‘,‘text‘);//設置標簽類型 27 tag.style.fontSize = ‘16px‘; //設置標簽屬性 28 tag.style.color = ‘red‘; //設置標簽屬性29 30 document.createElement(‘p‘);//創建一個p標簽 31 p.appendChild(tag); //將創建的input標簽添加到p標簽中 32 document.getElementById(‘i1‘).appendChild(p);//將p標簽添加到id為1的div中 33 34 } 35 36 37 </script> 38 39 40 41 42 </body> 43 </html>
知識點：createElement(" ")創建標簽
appendChild() 添加子標簽
效果如下圖：
內容是自己輸入的為了演示 第種方法設置了text的屬性
JavaScript兩種創建標簽的的方法，實現點擊按鈕讓text自增