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 16 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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检测url是否存在的方法
2015/04/14 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python检测某个变量是否有定义的方法
2015/05/20 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python制作Windows系统服务
2017/03/25 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python多线程同步实例教程
2019/08/11 Python
详解python statistics模块及函数用法
2019/10/27 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
工程部经理岗位职责
2013/12/08 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
委托公证书样本
2015/01/23 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript