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 访问容器对象
Oct 07 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
vuex存值与取值的实例
Nov 06 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
浅谈react路由传参的几种方式
Mar 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备份/还原MySQL数据库的代码
2011/01/06 PHP
php导出excel格式数据问题
2014/03/11 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
JQuery live函数
2010/12/24 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
js常用代码段整理
2011/11/30 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
清除输入框内的空格
2016/12/21 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
Shell编程面试题
2016/05/29 面试题
后进生转化工作制度
2014/01/17 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
2015年林业工作总结
2015/05/14 职场文书
学历证明范文
2015/06/16 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers