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 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php内嵌函数用法实例
2015/03/20 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
科室工作个人总结的自我评价
2013/10/29 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
中文师范生自荐信
2014/01/30 职场文书
升学宴主持词
2014/04/02 职场文书
幼儿园小班评语
2014/04/18 职场文书
2014年母亲节寄语
2014/05/07 职场文书
旅游节目策划方案
2014/05/26 职场文书
宣传标语大全
2014/07/01 职场文书
小学综合实践活动总结
2014/07/07 职场文书
中班下学期个人总结
2015/02/12 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫