javascript中innerText和innerHTML属性用法实例分析
更新时间：2015年05月13日 12:10:45 作者：永远爱好写程序
这篇文章主要介绍了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" 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 innerHTML、outerHTML、innerText、outerText的区别
- javascript innerText和innerHtml应用
- JavaScript中innerHTML，innerText，outerHTML的用法及区别
- js中innerText/textContent和innerHTML与target和currentTarget的区别
- JavaScript动态改变HTML页面元素例如添加或删除
- 快速解决js动态改变dom元素属性后页面及时渲染的问题
- 离开页面时检测表单元素是否被修改,提示保存的js代码
- js 获取元素在页面上的偏移量的方法汇总
- JavaScript获取页面上某个元素的代码
- js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
相关文章
这篇文章主要为大家详细介绍了JS实现前端缓存的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
100多个很有用的JavaScript函数以及基础写法汇总,在项目开发中经常会使用到，本文整理了一些，希望对你们有帮助2013-01-01
这篇文章主要介绍了TS命名空间合并讲解，回顾上一节的内容，在上一节中我们介绍了TS中最常见的声明合并：接口合并，今天要讲的内容也是TS中的声明合并，但这次是命名空间相关的合并,需要的朋友可以参考一下2021-12-12
Django模板系统提供了一套丰富的工具集,能够帮助开发者将动态数据有效地渲染到HTML页面中,它通过特殊的语法支持变量插入、逻辑标签和过滤器的使用,本文给大家介绍Django 中的templates使用,感兴趣的朋友一起看看吧2024-10-10
这篇文章主要介绍了JS实现从连接中获取youtube的key的方法,涉及javascript字符串操作的相关技巧,需要的朋友可以参考下2015-07-07
本文主要介绍了网页开发中页面跳转的概念和重要性,及使用JS实现页面跳转的几种常见方法,包括使用window.location.href,window.location.replace(),window.location.assign(),window.open(),form表单提交以及HTML的a标签等方法实现页面跳转,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了javascript创建对象的3种方法,对比分析js创建对象三种方式的优缺点，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要为大家详细介绍了JS实现简单打砖块弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了javascript使用正则表达式实现去掉空格之后的字符的方法,需要的朋友可以参考下2015-02-02
dat.gui可以方便地向场景中添加控制条，随时调整参数。下面这篇文章主要给大家介绍了关于Three.js利用dat.GUI如何简化试验流程的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
最新评论