夜光带你走进JavaScript（四十四）擅长的领域

最新推荐文章于 2019-11-14 08:46:55 发布

GeniusTeam-夜光

最新推荐文章于 2019-11-14 08:46:55 发布

阅读量137

点赞数

分类专栏： Genius-JavaScript

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102618584

版权

Genius-JavaScript 专栏收录该内容

59 篇文章 2 订阅

订阅专栏

夜光序言：

初恋的人大多都不懂爱，所以初恋失败的多。成功的少。

结婚应该找个未婚的，因为谁都喜欢原装。

而恋爱，还是找个恋爱过的人才好。

因为经历过恋爱的人才知道什么是爱，怎么去爱。

正文：

avaScript HTML DOM - 改变 HTML

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

改变 HTML 输出流

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

今天的日期是： Fri Oct 18 2019 08:42:50 GMT+0800 (中国标准时间)

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

绝对不要在文档(DOM)加载完成之后使用 document.write()。

这会覆盖该文档。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

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

</body>
</html>

改变 HTML 内容

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

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

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

下面这个实例改变了 <p>元素的内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

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

</body>
</html>

<!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 文档含有 id="header" 的 <h1> 元素
我们使用 HTML DOM 来获得 id="header" 的元素
JavaScript 更改此元素的内容 (innerHTML)

嗯唔：改变 HTML 属性

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

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

例子中改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<img id="image" src="img/4.jpg"  width="160" height="120">
<script>
    document.getElementById("image").src="img/7.png";
</script>
<p>夜光：原图片为 4.jpg,脚本将图片修改为 7.png</p>

</body>
</html>

上面的 HTML 文档含有 id="image" 的 <img> 元素
我们使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "4.jpg" 改为 "7.png"）

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进JavaScript（四十四）擅长的领域

夜光序言：初恋的人大多都不懂爱，所以初恋失败的多。成功的少。结婚应该找个未婚的，因为谁都喜欢原装。而恋爱，还是找个恋爱过的人才好。因为经历过恋爱的人才知道什么是爱，怎么去爱。正文：avaScript HTML DOM - 改变 HTMLHTML DOM 允许 JavaScript 改变 H...
复制链接

扫一扫

专栏目录