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 相关文章推荐
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
详解JavaScript 的执行机制
Sep 18 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
react路由配置方式详解
2017/08/07 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
用python实现百度翻译的示例代码
2018/03/09 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
白色公司:The White Company
2017/10/11 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
初中音乐教学反思
2014/01/12 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
高一军训感想
2015/08/07 职场文书
送给客户微信问候语!
2019/07/04 职场文书