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


Posted in Javascript onMay 13, 2015

本文实例讲述了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" id="lnk">
百<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 id="divMain"></div>
<input type="button" value="动态添加按钮" onclick="CreateButton()"/>
</body>
</html>

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

Javascript 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
JavaScript实现弹出窗口效果
Dec 09 Javascript
javascript元素动态创建实现方法
May 13 #Javascript
javascript实现模拟时钟的方法
May 13 #Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 #Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 #Javascript
javascript中clipboardData对象用法详解
May 13 #Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 #Javascript
浅谈jQuery中replace()方法
May 13 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
在Vue中使用antv的示例代码
2020/06/29 Javascript
Python机器学习之决策树算法实例详解
2017/12/06 Python
python如何实现反向迭代
2018/03/20 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python之列表推导式的用法
2019/11/29 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
机械设计职业生涯规划书
2013/12/27 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
继电保护工岗位职责
2014/01/05 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
创业计划书如何编写
2014/02/06 职场文书
秸秆管理实施方案
2014/03/15 职场文书
社会实践活动报告
2015/02/05 职场文书
现货白银电话营销话术
2015/05/29 职场文书
Python基础知识之变量的详解
2021/04/14 Python
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL