innerHTML outerHTML innerText value 區別

標籤：var   ges   text   image   文本   pre   ntb   document   innertext   

定義

• innerHTML: 屬性設定或返回表格行的開始和結束標籤之間的 HTML。（也就數說，用innerHTML的元素必須是標籤對的形式，也就是input啥都輸不出來）
• outerHTML: 設定或擷取對象及其內容的 HTML 形式。（標籤對，input輸出本身）
• innerText： 設定或擷取位於對象起始和結束標籤內的文本。（標籤對,input啥也輸不出來）
• value 這個用的地方比較多,這裡僅以input中的value為例。就是input的值。(標籤對,輸出undefined)

代碼

1 <span id="outer" value="這是outer">2     <span id="mid" value="這是mid">3         <span id="inner" value="這是inner">text</span>4         <input type="text" id="input" value="這是input的內容"/>5     </span>6 </span>

 1 var outer = document.getElementById(‘outer‘); 2 var mid = document.getElementById(‘mid‘); 3 var inner = document.getElementById(‘inner‘); 4 var input = document.getElementById(‘input‘); 5  6 console.log(‘outer的value是‘ + outer.value); 7 console.log(‘outer的innerHTML是‘ + outer.innerHTML); 8 console.log(‘outer的outerHTML是‘ + outer.outerHTML); 9 console.log(‘outer的innerText是‘ + outer.innerText);10 11 console.log(‘mid的value是‘ + mid.value);12 console.log(‘mid的innerHTML是‘ + mid.innerHTML);13 console.log(‘mid的outerHTML是‘ + mid.outerHTML);14 console.log(‘mid的innerText是‘ + mid.innerText);15 16 console.log(‘inner的value是‘ + inner.value);17 console.log(‘inner的innerHTML是‘ + inner.innerHTML);18 console.log(‘inner的outerHTML是‘ + inner.outerHTML);19 console.log(‘inner的innerText是‘ + inner.innerText);20 21 console.log(‘input的value是 ‘ + input.value);22 console.log(‘input的innerHTML是‘ + input.innerHTML);23 console.log(‘input的outerHTML是‘ + input.outerHTML);24 console.log(‘input的innerText是‘ + input.innerText);

結果

 

innerHTML outerHTML innerText value 區別