input通過id的賦值 js jquery innerHTML和outerHTML 的區別
阿新 • • 發佈：2018-03-27
outerhtml con ace har 內容 doc 技術分享 pos gif
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>input</title> 6 <script type="text/javascript" src="js/jquery-1.8.1.min.js" ></script> 7 </head> 8 <body> 9 <script> 10 function change_jq(){ 11 12 //JQ獲取input值 13 var user_val=$(‘#user‘).val(); 14 //jq賦值到input 15 $(‘#display_val‘).val(user_val); 16 //可修改 id val等 17 $("#display_val2").attr("value",user_val); 18 } 19 20 function change_js(){ 21 //js獲取 22 var book_name=document.getElementById("book").value; 23 //js賦值 24 document.getElementById("book_val").value=book_name; 25 } 26 27 function get_div_val(){ 28 var html=document.getElementById("div1"); 29 console.log(‘innerHTML:‘+html.innerHTML);//innerHTML:這是一個div<span>這是一個span</span> 30 console.log(‘outerHTML:‘+html.outerHTML);//outerHTML:<div id="div1">這是一個div<span>這是一個span</span></div> 31 console.log(‘innerText:‘+html.innerText);//innerText:這是一個div這是一個span 32 console.log(‘outerText:‘+html.outerText);//outerText:這是一個div這是一個span 33 } 34 </script> 35 <h3>input</h3> 36 輸入內容: <input id="user" placeholder="請輸入..." onchange="change_jq();" type="text"> 37 JQ賦值$("#id").val(val): <input id="display_val" type="text" > 38 JQ賦值$("#id").attr("value",val): <input id="display_val2" type="text" > 39 40 <br> 41 <br> 42 輸入: <input id="book" placeholder="請輸入..." onchange="change_js();" type="text"/> 43 js賦值:<input id="book_val" type="text" /> 44 <hr /> 45 <h3>div</h3> 46 <input type="button" onclick="get_div_val()" value="獲取div內容"/> 47 <div id="div1">這是一個div<span>這是一個span</span></div> 48 <p> 49 innerHTML 設置或獲取位於對象起始和結束標簽內的 HTML <br /> 50 outerHTML 設置或獲取對象及其內容的 HTML 形式 <br /> 51 innerText 設置或獲取位於對象起始和結束標簽內的文本 <br /> 52 outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本<br /> 53 </p> 54 55 </body> 56 </html>
input通過id的賦值 js jquery innerHTML和outerHTML 的區別