input通过id的赋值 js jquery innerHTML和outerHTML 的区别 

 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>

 

posted @ 2018-03-27 11:45  vip钻石用户  阅读(635)  评论(0)    收藏  举报