javascript中innerHTML 获取或替换html内容的实现代码


Posted in Javascript onMarch 17, 2020

 innerHTML 属性用于获取或替换 HTML 元素的内容,语法为Object.innerHTML
其中1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素;2.注意书写,innerHTML区分大小写。
我们通过id="light"获取<div> 元素,并将元素的内容输出和改变元素内容,代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>innerHTML属性</title>
 </head>
 <body>
  <div id="cshi">
   你好,黑夜20200317
  </div>
  <!-- <script type="text/javascript">
   var mylight=document.getElementById('light');
   document.write('原始内容:'+mylight.innerHTML+'<br/>');//输入元素内容
   mylight.innerHTML='javascript tomorrow';//修改元素内容
   document.write('替换内容:'+mylight.innerHTML);
  </script> -->
  <script type="text/javascript">
   var mystr=document.getElementById('cshi');
   mystr.innerHTML="DOM操作";
   // document.write(mystr);
  </script>
 </body>
</html>

 通过id获取h2标签元素,并赋给变量mychar,然后使用innerHTML属性,将获取的h2标签内容修改为"Hello world!"

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
 var mychar= document.getElementById('icon');   ;
 document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
 mychar.innerHTML="Hello world!";
 document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

总结

到此这篇关于javascript中innerHTML 获取或替换html内容的文章就介绍到这了,更多相关js替换html内容内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 #Javascript
用js编写留言板
Mar 17 #Javascript
Vue脚手架编写试卷页面功能
Mar 17 #Javascript
基于JavaScript实现留言板功能
Mar 16 #Javascript
JS实现简易留言板(节点操作)
Mar 16 #Javascript
JavaScript实现旋转木马轮播图
Mar 16 #Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 #Javascript
You might like
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
json 定义
2008/06/10 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Python多线程爬虫简单示例
2016/03/04 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python线性回归实战分析
2018/02/01 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python类的实例化问题解决
2019/08/31 Python
python 实现return返回多个值
2019/11/19 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
Python新手学习raise用法
2020/06/03 Python
python matplotlib库的基本使用
2020/09/23 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
领导干部考察材料
2014/02/08 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
六查六看六改心得体会
2014/10/14 职场文书
刑事上诉状范文
2015/05/22 职场文书
运动会通讯稿600字
2015/07/20 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android