JavaScript中的innerHTML,innerHTML,value属性

作者 : 开心源码 本文共1299个字,预计阅读时间需要4分钟 发布时间: 2022-05-14 共196人阅读

一,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>
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript中的innerHTML,innerHTML,value属性

发表回复