JavaScript中的innerHTML，innerHTML，value属性

绝地灬酷狼 2022-11-04 08:20 153阅读 0赞

#### 一，innerHTML ####

innerHTML在javaScript中具有双向功能，一是可以从指定的元素对象中获取内容，二是可以把自定义内容插入到指定的元素对象中去。

**定义和用法:**  
innerHTML属性用于设置或返回指定标签之间的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标签元素中插入内容

<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.innerText  //返回
    node.innerText = text  //设置

*例：*  
获取元素的内部文本：

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

**innerHTML和innerText的区别：**

*  InnerHTML返回标记内的HTML内容，其中包含HTML标记。
 *  InnerText返回标记内文本的值，而不是HTML标记的值。

#### 三，value ####

value 属性可设置文本域的默认值。

*例：*  
获得文本域的默认值：

<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>