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 获取用户客户端操作系统版本
Aug 25 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
webpack实用小功能介绍
Jan 02 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
JS前端监控采集用户行为的N种姿势
Jul 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关联数组的10个操作技巧
2013/01/21 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
php提交post数组参数实例分析
2015/12/17 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
js实现小星星游戏
2020/03/23 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
广播体操口号
2014/06/18 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
老公保证书怎么写
2015/02/26 职场文书
医生行业员工的辞职信
2019/06/24 职场文书