使用 JS 注入 HTML

Coddy 移动云朵：HTML/CSS/JS 项目课程的第 15 课，共 18 课。

接下来的两节课中，我们将使用 JavaScript 注入云朵！

document.getElementById() 方法会返回一个元素对象，该对象表示 id 属性与指定字符串匹配的元素。由于指定的元素 ID 必须唯一，因此使用 ID 可以快速获取特定元素。例如：

const elem = document.getElementById("myid");

下面的示例会获取 ID 为 “myid” 的元素，并将它存储在名为 elem 的变量中。

获取元素对象后，你可以替换它的 inner HTML：

elem.innerHTML = '<p>Hello!</p>';

例如，如果你的 HTML 代码是：

<div id="myid">
</div>

注入上面的内容后，HTML 代码会变成这样：

<div id="myid">
	<p>Hello!</p>
</div>

挑战

简单

你的任务是将带有文本 "Some text" 的 h1 标签插入到 id 等于 “container” 的元素中（也就是云朵容器）。

将新代码添加到 JavaScript 文件的开头，不要删除你已经编写的内容。

注意：它应该覆盖现有的云朵元素。别担心，我们会在下一课中让云朵回来。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- 在这里编写 HTML 代码 -->
        <script src="script.js"></script>
    </body>
</html>

移动云朵：HTML/CSS/JS 项目中的所有课

1简介

4玩转 JS

2容器

5移动云朵

3云计算

6许多云朵

使用 JS 注入 HTML 项目课

注入云朵

遍历所有项

最后润色

自己练习： Web 在线编辑器