JavaScript-HTML DOM改变HTML

题记

javascript中html dom改变html

改变HTML输出流

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

改变HTML内容

语法:

document.getElementById(id).innerHTML=新的 HTML

实例:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>

</body>
</html>

实例:

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>

<h1 id="header">旧标题</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
<p>"旧标题" 被 "新标题" 取代。</p>

</body>
</html>

改变HTML属性

语法:

document.getElementById(id).attribute=新属性值

实例:

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>

<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

</body>
</html>

后记

觉得有用可以点赞或收藏!

相关推荐
乖女子@@@2 分钟前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
m0_570466414 分钟前
代码随想录算法训练营第二十八天 | 买卖股票的最佳实际、跳跃游戏、K次取反后最大化的数组和
java·开发语言·算法
程序喵大人5 分钟前
分享个C++线程池的实现源码
开发语言·c++·线程池
F2E_Zhangmo16 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响22 分钟前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
不会吃萝卜的兔子29 分钟前
go webrtc - 1 go基本概念
开发语言·golang·webrtc
weixin_5841214337 分钟前
vue3+ts导出PDF
javascript·vue.js·pdf
豌豆花下猫42 分钟前
Python 潮流周刊#118:Python 异步为何不够流行?(摘要)
后端·python·ai
要做朋鱼燕1 小时前
【C++】 priority_queue 容器模拟实现解析
开发语言·c++·笔记·职场和发展
jiaway1 小时前
【C语言】第四课 指针与内存管理
c语言·开发语言·算法