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 相关文章推荐
javascript 闭包
Sep 15 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
JS二维数组的定义说明
Mar 03 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
小程序实现上下切换位置
Nov 16 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源码分析之变量的存储过程分解
2014/07/03 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
javascript动画浅析
2012/08/30 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
审核会计岗位职责
2013/11/08 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
超市创业计划书
2014/09/15 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL