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 相关文章推荐
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
javascript常用函数(1)
Nov 04 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
js模拟F11页面全屏显示
Sep 17 Javascript
原生JS实现萤火虫效果
Mar 07 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
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
php类
2006/11/27 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
python绘制无向图度分布曲线示例
2019/11/22 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python3字符串输出常见面试题总结
2020/12/01 Python
python中time、datetime模块的使用
2020/12/14 Python
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Python 图片添加美颜效果
2022/04/28 Python