php修改js内容,js怎样修改html元素的内容?HTML DOM实现修改内容
js怎样修改html元素的内容?本章就给大家介绍在js中利用HTML DOM是怎样修改html元素内容的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
首先我们要了解HTML DOM是什么?HTML DOM的作用是什么?
HTML DOM ,文档对象模型(Document Object Model)的简称,当网页被加载时,浏览器就会创建页面的文档对象模型。
HTML DOM 模型可以被构造为对象的树。如下图:
通过 HTML DOM,可访问 JavaScript HTML 文档中的所有元素,可以获得了足够的能力来创建动态的 HTML。通过 HTML DOM,JavaScript可以实现如下的功能:
js 能够修改页面中的所有 HTML 元素;
js 能够修改页面中的所有 HTML 属性;
js 能够修改页面中的所有 CSS 样式;
js 能够对页面中的所有事件做出反应。
下面我们就来具体介绍一下通过 HTML DOM,js是怎样修改html元素的内容:
1、js修改添加html内容
js 能够创建添加动态的 HTML 内容,使用write()方法就可直接向 HTML 向文档写入 HTML 表达式或 JavaScript 代码。
write()方法内可列出多个参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中。
语法:document.write(exp1,exp2,exp3,....)
说明:
虽然根据 DOM 标准,write()方法只接受单个字符串作为参数。但,write() 可接受任意多个参数。
我们通常按照以下两种的方式使用 write() 方法:
1、在使用该方在文档中输出 HTML
2、在调用该方法的的窗口之外的窗口、框架中产生新文档。注意:在此种方式中,请务必使用 close() 方法来关闭文档。
实例:
document.write("
Hello World!
","现在是:",Date());
效果图:
2、js修改替换htnl元素的内容
js修改替换 html元素 内容的最简单、直接的方法就是使用 innerHTML 属性。
语法:document.getElementById(id).innerHTML=new HTML
document.getElementById(id)是通过id查找并获得需要修改替换内容的 HTML元素,然后使用innerHTML 属性修改替换html元素的内容。
实例(改变了
元素的内容):
Old Header
var element=document.getElementById("header");
element.innerHTML="New Header";
"Old Header" 已被修改为 "New Header"。
效果图:
说明:
例子中的 HTML 文档包含有 id="header" 的
元素;
我们使用 HTML DOM 来查找并获得 id="header" 的
元素;
在使用innerHTML属性就可修好替换html元素
里的全部内容 。
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程!
相关推荐:
php修改js内容,js怎样修改html元素的内容?HTML DOM实现修改内容相关推荐
- php 修改input内容,JS简单获取并修改input文本框内容的方法示例
这篇文章主要介绍了JS简单获取并修改input文本框内容的方法,结合实例形式分析了JavaScript针对页面元素的获取.赋值等相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS简单获取并修改in ...
- 解决修改css或js文件,浏览器缓存更新问题。
解决修改css或js文件,浏览器缓存更新问题. 参考文章: (1)解决修改css或js文件,浏览器缓存更新问题. (2)https://www.cnblogs.com/zhangycun/p/7427 ...
- 谷歌浏览器修改CSS和js后同步保存到文件中 (译)
本文标题:谷歌浏览器修改CSS和js后同步保存到文件中. 文本作者:魔芋铃. 英文原文:http://www.stephensaw.me/google-chrome-devtools-source-m ...
- idea修改css,js样式浏览器没更新问题
idea修改css,js样式浏览器没更新问题 最近写项目经常遇到这么个问题,在项目里更改了css源文件,target或者out文件目录下css也更新了,但到了浏览器上就是没更新,具体更没更,大家可以在 ...
- UEditor编辑器修改ueditor.all.js后压缩的问题
总所周知,ueditor.all.js大小1.2M左右. 如果有修改ueditor.all.js,则没法引用ueditor.all.min.js 市面上在线压缩工具都不支持压缩ueditor.all. ...
- 渗透学习-学习记录-利用浏览器的开发者工具实时修改网页前端JS代码(实现绕过)
文章目录 前言 一.JS前端的修改 前言 最近学习了一些有关于JS脚本搭建网站方面的安全知识.通常来说JS是前端的页面代码,因此我们可以直接修改前端的JS代码来实现绕过,故我试着做了一下利用浏览器的开 ...
- 解决idea修改html、js、css后,浏览器不能同步加载
重装了IDEA后,忽略了一些设置,导致在开发springboot项目时,启动了项目,修改了前端文件,但是浏览器中并不能实时加载修改的内容. 主要是IDEA的2个地方需要设置: 一.修改file-set ...
- 原生js修改html,原生JS设置样式并恢复默认样式
HTML> javascript body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid 1px; pa ...
- js 读取php页面内容,js读取html文件 js获取html页面显示内容
CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码 如题,CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码 JS读取TXT文件内容的代码如下: 读 ...
最新文章
- UVA 1415 - Gauss Prime(数论,高斯素数拓展)
- spring mvc中的@propertysource
- Linux学习:shell 命令(软件安装和卸载)
- ABAP Development Tool IDE里编写的CDS view源代码是如何传递到ABAP后台并解析的
- 【GIS风暴】GeoJSON数据格式案例全解
- 围棋经典棋谱_秀秀老师:茶艺师也要学好围棋
- Arraylist添加5个学生对象,按成绩降序, 删除前三之后的学生
- 6大设计原则之里氏替换原则
- string转map集合_集合(下)
- Select显示多级分类列表
- R语言将一列分解为多列
- Android入门(9)AudioRecord和AudioTrack类的使用【转】http://blog.sina.com.cn/s/blog_6309e1ed0100j1rw.html...
- No qualifying bean of type ‘service‘ available:单元测试报错
- 长城服务器装双系统,苹果双系统怎么装win7系统,教你苹果windows7双系统教程
- python中倒背如流_倒背如流中倒背是什么意思古代有种背书方法是倒背,倒
- 解决 Ubuntu 安装显卡驱动后,屏幕变黄的原因
- 我叫mt4服务器维护中,我叫MT4:7月11日凌晨维护公告
- 谷歌获批GAN专利,一整套对抗训练网络被收入囊中
- java.lang.IllegalArgumentException: baseUrl must end in /: http://xxx.xxx.x.xxx:xxxx/Handler1.ashx
- IT专业人士的可靠远程桌面软件丨Radmin功能简介
热门文章
- 获取当前窗口是否可见 document.visibilityState
- jsoup解析和遍历一个html文档详解
- java 汇总_java基础汇总
- linux 访问共享内存,Linux下的共享内存(03)---通过指针访问共享内存中的数据...
- 【OpenCV 例程200篇】60. 非线性滤波—联合双边滤波
- ndnsim r语言 ubuntu_Ubuntu14.04安装配置ndnSIM
- python微信聊天机器人源码_8.【代码】微信聊天机器人(API的应用) - Python网络爬虫实战...
- 数据结构-队列1-顺序存储
- opencv glob 内存溢出异常
- 如何在报表中实现算法的可挂接需求