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>