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

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

实例:

nbsp;html>document.write("

Hello World! ","现在是:",Date());

登录后复制

效果图:

1.jpg

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

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

语法:

document.getElementById(id).innerHTML=new HTML

登录后复制

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

实例(改变了

元素的内容):

nbsp;html>

Old Header

var element=document.getElementById("header");element.innerHTML="New Header";

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

登录后复制

效果图:

1.jpg

说明:

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

元素;

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

元素;

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

里的全部内容 。

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

相关推荐:

公益php培训视频教程

JavaScript图文教程

JavaScript在线手册

以上就是js怎样修改html元素的内容?HTML DOM实现修改内容的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2739833.html

(0)
上一篇 2025年3月8日 02:10:02
下一篇 2025年3月5日 02:21:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论