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

Posted 守陵人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于input通过id的赋值 js jquery innerHTML和outerHTML 的区别的主要内容,如果未能解决你的问题,请参考以下文章

如何用jquery 给input但id为动态的框赋值

HTML JS 取值和赋值

Ajax 如何给div赋值呢

innerHTML添加一个ID="abc"的input然后想用jquery$("#abc")获取并赋值获取不到,也无法赋值

用jquery 怎么给文本框赋值

给“td”,“div”,“input”赋值