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>
