JavaScript-HTML DOM改变HTML

南宫遐迩2023-10-27 12:23

题记

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>

后记

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