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 相关文章推荐
100个不能错过的实用JS自定义函数
Mar 05 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
Vue header组件开发详解
Jan 26 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
详解node和ES6的模块导出与导入
Feb 19 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
基于python编写的微博应用
2014/10/17 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Django logging配置及使用详解
2019/07/23 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
美国在线购物频道:Shop LC
2019/04/21 全球购物
求职信范文大全
2014/05/26 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
保研推荐信范文
2015/03/25 职场文书