JavaScript中的innerHTML，innerHTML，value屬性

時間 2021-03-04

標籤 javascript html 前端 java node spa code orm xml htm 欄目 JavaScript 简体版

原文原文鏈接

一，innerHTML

innerHTML在javaScript中具備雙向功能，一是能夠從指定的元素對象中獲取內容，二是能夠把自定義內容插入到指定的元素對象中去。javascript

定義和用法:
innerHTML屬性用於設置或返回指定標籤之間的HTML內容html

Object.innerHTML = "HTML";// 設置 var html = Object.innerHTML;// 獲取

例1：
獲取ID爲mochu的P標籤元素中的內容前端

<html> <head> <script type="text/javascript"> function getinnerHTML(){ alert(document.getElementById("mochu").innerHTML); } </script> </head> <body> <p id="mochu"><font color="#000">獲取到的內容！</font></p> <input type="button" onclick="getinnerHTML()" value="點擊" /> </body> </html>

例2：
向ID爲mochu的P標籤元素中插入內容java

<html> <head> <script type="text/javascript"> function setInnerHTML(){ document.getElementById("mochu").innerHTML = "<span>這裏是替換的內容包括標籤</span>"; } </script> </head> <body> <p id="mochu"><font color="#000">被替換掉的內容</font></p> <input type="button" onclick="setInnerHTML()" value="點擊" /> </body> </html>

二，innerHTML

定義和用法:
innerText屬性設置或返回指定節點及其全部後代的文本內容 .node

node.innerText //返回 node.innerText = text //設置

例：
獲取元素的內部文本：spa

var x = document.getElementById("myBtn").innerText;

innerHTML和innerText的區別：code

InnerHTML返回標記內的HTML內容，其中包含HTML標記。
InnerText返回標記內文本的值，而不是HTML標記的值。

三，value

value 屬性可設置文本域的默認值。orm

例：
得到文本域的默認值：xml

<html> <head> <script type="text/javascript"> function alertValue(){ alert(document.getElementById("text1").value) } </script> </head> <body> <form> <input type="textfield" id="text1" value="1" /> <input type="button" id="button1" onclick="alertValue()" value="click" /> </form> </body> </html>