JSを使ってHTMLを挿入する
Coddyの「流れる雲 - HTML/CSS/JSプロジェクト」コースのレッスン 15/18。
次の2つのレッスンでは、JavaScriptを使って雲を注入します!
document.getElementById() メソッドは、id プロパティが指定された文字列と一致する要素を表す要素オブジェクトを返します。要素のIDは、指定されている場合は一意である必要があるため、特定の要素に素早くアクセスするための便利な方法です。例えば:
const elem = document.getElementById("myid");次の例では、idが “myid” である要素を取得し、それを elem という名前の変数に格納します。
要素オブジェクトを取得した後、その内部HTMLを置き換えることができます:
elem.innerHTML = '<p>Hello!</p>';例えば、HTMLコードが以下のようになっている場合:
<div id="myid">
</div>上記の注入後、HTMLコードは次のようになります:
<div id="myid">
<p>Hello!</p>
</div>チャレンジ
簡単あなたのタスクは、idが"container"(私たちのクラウドコンテナ)に等しい要素の中に、"Some text"というテキストを持つh1タグを注入することです。
新しいコードをJavaScriptファイルの最初に追加してください。すでに行った作業は何も削除しないでください。
注意:これにより既存のクラウド要素が上書きされますが、心配しないでください。次のレッスンでクラウドを元に戻します。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>