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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
js Function类型
Dec 04 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
js实现查询商品案例
Jul 22 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 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
杏林同学录(八)
2006/10/09 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
php curl常用的5个经典例子
2017/01/20 PHP
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
python正则表达式面试题解答
2020/04/28 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
python基于socket函数实现端口扫描
2020/05/28 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
幼儿园国庆节活动方案
2014/02/01 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书