0
1

More than 3 years have passed since last update.

JavaScript DOM操作でHTML要素を書き換える

Last updated at Posted at 2020-12-27

<dd>タグにidが設定されているのでid名を指定して対象のHTML要素を書き換えます!

index.html
 <!DOCTYPE html>
 <html lang="ja">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>

 <body>
     <h1>JavaScript Practice</h1>
     <dl>
         <dt>今日の天気</dt>
         <dd id="weather">晴れ</dd>
     </dl>
     <script src="index.js"></script>
 </body>

 </html>

1,要素を取得し書き換える

document.getElementById("id名");

index.js
// DOM操作でHTMLを書き換える
let element = document.getElementById("weather");

// innnerHTMLは記述したテキストもHTMLとして認識
element.innerHTML="<span>曇り</span>";

// textContentは記述したテキストを文字列として認識
element.textContent="<span>曇り</span>";
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1