javascript中innerText和innerHTML属性用法实例分析

网络编程 JavaScript javascript技巧 分类:[default] 更新日期: 2016-03-16
这篇文章主要介绍了javascript中innerText和innerHTML属性用法,实例分析了javascript中innerText和innerHTML属性的作用和相关的使用技巧,需要的朋友可以参考下

本文实例讲述了javascript中innerText和innerHTML属性用法。分享给大家供大家参考。具体分析如下:

几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内
的文本表示形式和HTML源代码,这两个属性是可读可写的

innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>测试(innerText和innerHTML)</title>
 <script type="text/javascript">
 function TestOutput() {
  var myLink = document.getElementById("lnk");
  alert('innerText-->' + myLink.innerText);
  //得到百度网站
  alert('innerHTML-->' + myLink.innerHTML);
  //得到百<font color="red">度</font>网站
 }
 function EditInnerText() {
  var myLink = document.getElementById("lnk");
  myLink.innerText = "凤凰网";
 }
 function EditInnerHTML() {
  var myLink = document.getElementById("lnk");
  myLink.innerHTML = "<font color='blue'>凤凰网</font>";
 }
 function dynamicButtonClick() {
  alert('我是动态创建的');
 }
 function CreateButton() {
  var div = document.getElementById("divMain");
  div.innerHTML = "<input type='button' value='单击我' 
  onclick='dynamicButtonClick()' />";
 }
 </script>
</head>
<body>
<a href="http://www.baidu.com" >
百<font color="red">度</font>网站</a>
<input type ="button" value="测试" onclick="TestOutput()"/>
<input type="button"" value="修改InnerText" onclick="EditInnerText()"/>
<input type="button"" value="修改InnerHTML" onclick="EditInnerHTML()"/>
<div ></div>
<input type="button" value="动态添加按钮" onclick="CreateButton()"/>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • JavaScript中的正则表达式(推荐)
    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式推荐,感兴趣的朋友一起学习吧正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词 ...
  • 将PHP的session数据存储到数据库中的代码实例
    这里我们将分享两个将PHP的session数据存储到数据库中的代码实例,分别针对PostgreSQL与MySQL,需要的朋友可以参考下一个开发环境有多个网站,需要使用不同的session,解决方案很多.不过这次也高大上一把,用数据库存,方便以后扩展. PostgreSQL版首先是数据库的部分 --drop table php_session create u ...
  • 探讨Ajax中有关readyState状态值和status状态码)的问题
    这篇文章主要介绍了探讨Ajax中有关readyState状态值和status状态码的问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function () { t ...
  • asp画中画广告插入在每篇文章中的实现方法
    这篇文章主要介绍了asp画中画广告插入在每篇文章中的实现方法,需要的朋友可以参考下尽管很多人给出了给每篇文章加上画中画广告的方法,但是这些所谓的方法,都不能真正地实现文字环绕在广告周围的"画中画"效果,只能左对其或者右对齐.现在要讨论的这个方法才能真正实现像新浪网.搜狐网那样的画中画广告效果. 首先说一下错误的div+CSS方法,希望大家 ...
  • ASP.NETWebApi2实现多文件打包并下载文件的实例
    ASP.NETWebApi2实现多文件打包并下载文件的实例
    这篇文章主要介绍了ASP.NET Web Api 2利用ByteArrayContent和StreamContent实现多文件打包并下载的方法,提供源码下载,需要的朋友可以参考下.最近由于工作和个人事务,站点也好久没更新了,但这并不影响我对.NET的热情.站点的更新工作还是得想办法抽时间来完成的. 今天利用中午的时间来写一篇关于Asp.Net Web Api ...
  • 详解表单验证正则表达式实例(推荐)
    这篇文章主要介绍了详解表单验证正则表达式实例推荐的相关资料,非常不错,具有参考借鉴价值,特此分享到平台供大家参考验证:!reg.test(value) 邮箱: 代码如下:reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i; 不包含中文: 代码如下:r ...
猜你喜欢