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>

后记

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

相关推荐
高兴达28 分钟前
Spring boot入门工程
java·spring boot·后端
Ronin30528 分钟前
【C++】类型转换
开发语言·c++
mrbone1144 分钟前
Git-git worktree的使用
开发语言·c++·git·cmake·worktree·gitab
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
csdn_aspnet1 小时前
Node.js 使用 WebSockets 和 Socket.IO 实现实时聊天应用程序
node.js
真实的菜1 小时前
JVM类加载系统详解:深入理解Java类的生命周期
java·开发语言·jvm
代码讲故事1 小时前
多种方法实现golang中实现对http的响应内容生成图片
开发语言·chrome·http·golang·图片·快照·截图
虾球xz2 小时前
CppCon 2018 学习:EFFECTIVE REPLACEMENT OF DYNAMIC POLYMORPHISM WITH std::variant
开发语言·c++·学习
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
Allen_LVyingbo2 小时前
Python常用医疗AI库以及案例解析(2025年版、上)
开发语言·人工智能·python·学习·健康医疗