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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
javascript prototype 原型链
Mar 12 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 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 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
Angular路由简单学习
2016/12/26 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
python删除某个字符
2018/03/19 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python占用的内存优化教程
2019/07/28 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
关于python 跨域处理方式详解
2020/03/28 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
电子商务专业求职信
2014/03/08 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
新学期开学标语2015
2015/07/16 职场文书
Python 键盘事件详解
2021/11/11 Python