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

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

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

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

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

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

实例:

document.write("

Hello World!

","现在是:",Date());

效果图:

ae6612671a0af49f322a55cee6fc721f.png

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"。

效果图:

bf21eef7ab4e35e41d812d54b8a2f47d.png

说明:

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

元素;

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

元素;

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

里的全部内容 。

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

相关推荐:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java中的删除函数的使用方法,如何用Java删除文件

本文概述有两种删除Java文件的方法:使用File.delete()方法使用File.deleteOnExit()方法Java File.delete()方法在Java中, 我们可以使用File类的File.delete()方法删除文件。 delete()方法删除由抽象路径名表示的文件或目录。如果路径名是目录, 则该目录必须为空才能…

C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现

C#开发微信门户及应用(28)--微信“摇一摇周边”功能的使用和接口的实现 原文:C#开发微信门户及应用(28)--微信“摇一摇周边”功能的使用和接口的实现”摇一摇周边“是微信提供的一种新的基于位置的连接方式。用户通过“摇一摇”的“周边”页卡,可以与线下商户进行互…

【计算几何】点在多边形内部

问题描述:已知点P(x,y)和多边形Poly,判断点P(x,y)是否在多边形内部。 基本方法:射线法 以点P为端点,向左方作射线L,由于多边形是有界的,所以射线L的左端一定在多边形外部,考虑沿着L从无究远处开…

Hungary(匈牙利算法)——二分图最大匹配

在复习匈牙利算法的时候,发现这么一篇介绍匈牙利算法的文章,非常通俗易懂,所以就借鉴过来了。 复杂度:邻接矩阵:O(v^3)邻接表:O(V*E) 附上链接:趣…

白盒测试 语句覆盖、判定覆盖、条件覆盖、判定条件覆盖、条件组合覆盖、路径覆盖(转)...

转自:http://wenda.tianya.cn/wenda/thread?tid758a1e447e62b7df&hlja 白盒测试作为测试人员常用的一种测试方法,越来越受到测试工程师的重视。白盒测试并不是简单的按照代码设计用例,而是需要根据不同的测试需求,结合不同的…

matlab getsplitpic,MATLAB_9-模式识别笔记

1,识别单独字符的:思想:picsize[20,10];创建一个矩阵,将两个照片整理成大小一致的。具体就是使用后面的:aimresize(a,picsize);fontsABCDEFGHNVJXSMQ;建立字符串用于匹配输出(就是识别的功能!)下面一个for循…

浅谈android4.0开发之GridLayout布局

作者:李响 本文重点讲述了自android4.0版本号后新增的GridLayout网格布局的一些基本内容,并在此基础上实现了一个简单的计算器布局框架。通过本文,您可以了解到一些android UI开发的新特性,并可以实现相关应用。 在android4.0版本号之…

ThinkPHP---RBAC

一、什么是RBAC 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注。 在RBAC中,权限与角色相关联,用户通过成为适当角色的成员而…

c mysql bulk,MySqlBulkLoader批量上传遇到的问题和解决方法

最近用 MySqlBulkLoader 向MySql数据库批量上传数据遇到了些问题,做下记录问题1:如图原因:版本不合,使用的MySql版本和引用的mysql.data 版本不和解决方案:用nuget将mysql.data升级到对应版本,如果是MySql8…

验证必须是数字php,Element 中表单非必填数据项 必须为数字的验证问题

Element-ui 的el-form组建中,自带基本的验证功能,比如某些项必填的验证,直接加入rules 规则中即可,如下实例:在页面中书写如下:在vue 初始化data中filterForm: {firstDay: ,lastDay: },rules: {firstDay: […

为开发者准备的9个实用PHP代码片段(转)

[导读] 当你开发网站、app或博客系统时,如果有一些实用的代码片段可以直接使用,就可以节省你大量的时间和精力。这篇文章就为你分享几个实用的PHP代码片段,帮助你的Web开发。 本文由PHP100中文网编译,转载请看文末的转载要求&…

idea 自动生产序列吗,IDEA自动生成序列化Id

实体对象实现了java.io.Serializable接口后,一般都会提供一个serialVersionUID以做版本区分。在idea里,可以通过设置来快速生成serialVersionUID。设置方法1、打开Preferences–>Editor–>Inspections,然后在右侧输入UID进行搜索(搜索方…

ZH奶酪:Ionic中(弹出式窗口)的$ionicModal使用方法

Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面; $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一些参数,通常用于通知消息、确认等作用&a…

php实现购物车 redis,redis 哈希数据类型简单操作(实现购物车案例)

这里不累赘如何安装redis和php redis扩展,主要熟悉调用redis哈希数据类型如图简单方法操作如下1:hSet2:hGet4:hDel5:hGetAll4:hExists5:hIncrBy简单购物车实现namespaceHome\Controller;useThink\Controller;useOrg\Net\Http;useThink\Cache\Driver\Red…

php scsi平台,三大SCSI Target平台PK:让服务器化身SAN

就服务器而言,从虚拟化平台到数据库应用的许多功能,都需要有SAN存储设备的支持,但是对于模拟测试、教学之类的应用来说,受到成本限制采购SAN存储设备便有所困难。特别是企业,都不会仅仅为了测试等常态使用的用途&#…

[BZOJ 1012] [JSOI 2008] 最大数maxnumber

1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 5094 Solved: 2276[Submit][Status][Discuss]Description 现在请求你维护一个数列,要求提供以下两种操作: 1、 查询操作。语法:Q L 功能:查询当…

php 数组元素往后移动,php 二维数组 元素移动

[已关闭问题]关闭于 2014-11-20 16:02二维数组元素如何实现,满足一定的条件,跳到下下个元素,不满足的话,顺序执行呢?比如:header("Content-type:text/html;charsetutf-8");$arr array(array(id&…

帝国cms仿php自媒体新闻系统,帝国CMS仿《砍柴网》源码 专栏自媒体投稿资讯文章新闻网站模板...

在开发妹入手了一套模版,测试效果真心不错这里发出来供大家参考研究源码简介一家拥有全球视野的前沿科技媒体,我们始终秉承观点独到、全面深入、有料有趣的宗旨,在科技与人文之间寻找商业新价值,坚持以人文的视角解读科技&#xf…

【Win10】UAP/UWP/通用 开发之 x:Bind

【Win10】UAP/UWP/通用 开发之 x:Bind [Some information relates to pre-released product which may be substantially modified before its commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.] […

SRS文档

负责人:韩朝燕 1什么是用例? 在介始用例方法之前,我们首先来看一下传统的需求表述方式-"软件需求规约"(Software Requirement Specification)。传统的软件需求规约基本上采用的是功能分解的方式来描述系统功能,在这种表…