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赋值到input15 ????????$(‘#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这是一个span32 ????????console.log(‘outerText:‘+html.outerText);//outerText:这是一个div这是一个span33 ????}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 的区别
原文地址：https://www.cnblogs.com/s-xl/p/8656647.html