html改变内容吗,HTML DOM 改变 HTML 内容

本文介绍了JavaScript如何通过HTMLDOM来改变HTML元素的内容、样式和属性。利用innerHTML属性可以动态修改元素内容,document.write()用于在HTML输出流中插入内容,但不应在文档加载后使用。此外,可以改变元素的CSS样式和属性,例如更改src属性。文章还提及了使用AJAX实现无刷新页面更新和利用window.history.pushState改变URL而不刷新页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容:

今天的日期是:

Thu Feb 25 2016 19:25:10 GMT+0800

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

实例

document.write(Date());

9f4b937d50fe6102f62760801bf8f6ab.png

绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=new HTML

本例改变了

元素的内容:

实例

Hello World!

document.getElementById("p1").innerHTML="New text!";

本例改变了

元素的内容:

实例

var element=document.getElementById("header");

element.innerHTML="New Header";

实例讲解:

上面的 HTML 文档含有 id="header" 的

元素

我们使用 HTML DOM 来获得 id="header" 的元素

JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new value

本例改变了 元素的 src 属性:

实例

smiley.gif

document.getElementById("image").src="landscape.jpg";

实例讲解:

上面的 HTML 文档含有 id="image" 的 元素

我们使用 HTML DOM 来获得 id="image" 的元素

JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")

JavaScript HTML DOM - 改变 HTML

JavaScript HTML DOM - 改变 HTML HTML DOM 允许 JavaScript 改变 HTML 元素的内容. 改变 HTML 输出流 JavaScript 能够创建动态的 H ...

使用ajax实现无刷新改变页面内容

如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1

Java文件编码自动转换工具类(只改变编码,不会改变文件内容)

本篇随笔主要介绍了一个用java语言写的将一个文件编码转换为另一个编码并不改变文件内容的工具类: 通过读取源文件内容,用URLEncoding重新编码解码的方式实现. public class Cha ...

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

JavaScript HTML DOM - 改变CSS

JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

1.onclick事件 点击这里

js通过DOM改变html和css

1.改变html输出流,通过document.write() 直接向 HTML 输出流写内容

段落

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)

在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...

js innerHTML 改变div内容的方法

永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中.通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢.改变文字inner ...

随机推荐

js 控制表单提交

取客户的银行帐号SQL

SELECT ibybanks.bank_name, --银行 ibybanks.bank_branch_name, --分行 ibybanks.bank_account_num_electronic ...

EMVTag系列7《静态签名数据》

Ø 5F24    应用有效期 L: 3 -M(必备) 1)  芯片中的应用失效日期5F24,服务码5F30,必须与芯片中的二磁道等效数据(Tag57)中的失效日期和服务码一致. 2)  qPBOC ...

Good Bye 2015 C. New Year and Domino 二维前缀

C. New Year and Domino   They say "years are like dominoes, tumbling one after the other". ...

c++ 字符串函数用法举例

1. substr() 2. replace() 例子:split() 字符串切割: substr 函数原型: , size_t n = npos ) const; 解释:抽取字符串中从pos(默认为 ...

POJ 1182 食物链 (并查集)

食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 50601   Accepted: 14786 Description ...

JavaScript 函数参数是传值(byVal)还是传址(byRef)?

对于“JavaScript 函数参数是传值(byVal)还是传址(byRef)”这个问题,普遍存在一个误区:number,string等“简单类型”是传值,Number, String, Object ...

对$NOMOD51的理解

很多朋友在看asm代码的时候,对下面的语句不是很了解,下面解说一下. $NOMOD51 $INCLUDE (REG932.INC) 解释:$NOMOD51,这一指令功能是使A51不识别8051的所有预 ...

GCD其他实用场景

GCD线程间通信 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);     ...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值