0

0

js怎样修改html元素的内容?HTML DOM实现修改内容

青灯夜游

青灯夜游

发布时间:2018-10-09 09:54:30

|

19153人浏览过

|

来源于php中文网

原创

js怎样修改html元素的内容?本章就给大家介绍在js中利用html dom是怎样修改html元素内容的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们要了解HTML DOM是什么?HTML DOM的作用是什么?

HTML DOM ,文档对象模型(Document Object Model)的简称,当网页被加载时,浏览器就会创建页面的文档对象模型。

HTML DOM 模型可以被构造为对象的。如下图:

1.gif

通过 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() 方法来关闭文档。

实例:



	
		
		
	

效果图:

美易企业内容管理系统4.5
美易企业内容管理系统4.5

美易企业内容管理系统(原美易企业建站系统),是我们结合多年企业建站经验,专门针对中小企业,自主开发的快速建站程序,具有操作简便,扩展功能强大,模板使用简单,网站后续维护成本低等优点,得到众多企业用户的好评。美易企业内容管理系统,所有功能的实现均使用HTML、CSS、JS来实现,完全不需要去修改程序,让用户技术要求更低,使用更简单,功能扩展更方便。程序优势对比美易系统,使用简单:考虑到企业网站管理人

下载

1.jpg

2、js修改替换htnl元素的内容

js修改替换 html元素 内容的最简单、直接的方法就是使用 innerHTML 属性。

语法:

document.getElementById(id).innerHTML=new HTML

document.getElementById(id)是通过id查找并获得需要修改替换内容的 HTML元素,然后使用innerHTML 属性修改替换html元素的内容。

实例(改变了

元素的内容):




Old Header

"Old Header" 已被修改为 "New Header"。

效果图:

1.jpg

说明:

例子中的 HTML 文档包含有 id="header" 的

元素;

我们使用 HTML DOM 来查找并获得 id="header" 的

元素;

在使用innerHTML属性就可修好替换html元素

里的全部内容 。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程

相关推荐:

公益php培训视频教程

JavaScript图文教程

JavaScript在线手册

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Word 字间距调整方法汇总
Word 字间距调整方法汇总

本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

2

2025.12.24

任务管理器教程
任务管理器教程

本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

2

2025.12.24

AppleID格式
AppleID格式

本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

0

2025.12.24

csgo视频观看入口合集
csgo视频观看入口合集

本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

29

2025.12.24

yandex外贸入口合集
yandex外贸入口合集

本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

58

2025.12.24

添加脚注通用方法
添加脚注通用方法

本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

1

2025.12.24

重启电脑教程汇总
重启电脑教程汇总

本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

3

2025.12.24

纸张尺寸汇总
纸张尺寸汇总

本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

5

2025.12.24

Java Spring Boot 微服务实战
Java Spring Boot 微服务实战

本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

1

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
DOM操作与实战案例
DOM操作与实战案例

共14课时 | 1.9万人学习

Web前端开发极速入门
Web前端开发极速入门

共8课时 | 22.1万人学习

搭建web网站开发环境
搭建web网站开发环境

共6课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号