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检测页面是否缩放的小例子
May 16 Javascript
搞定immutable.js详细说明
May 02 Javascript
js选择器全面解析
Jun 27 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
vue把输入框的内容添加到页面的实例讲解
Nov 11 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三元运算的2种写法代码实例
2014/05/12 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
Python2.x与Python3.x的区别
2016/01/14 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
python实现用户管理系统
2018/01/10 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
python实现图片中文字分割效果
2019/07/22 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
档案检查欢迎词
2014/01/13 职场文书
晚宴邀请函范文
2014/01/15 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
客户经理岗位职责
2015/01/31 职场文书
Mysql Show Profile
2021/04/05 MySQL