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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
React列表栏及购物车组件使用详解
Jun 28 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/12/02 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
JS如何把字符串转换成json
2020/02/21 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
用Python实现职工信息管理系统
2020/12/30 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
单位未婚证明范本
2014/01/18 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
见义勇为事迹材料
2014/12/24 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android