JavaSciptでHTMLを操作する方法

JavaScript

JavaSciptでHTMLを操作する方法

今回はJavaSciptでHTMLを操作する方法を紹介します。



HTMLファイルを作成

今回は簡単なHTMLファイルを用意します。

<body>
  <div id="test">これはテストです</div>
</body>

出力結果はこのようになります。

JavaSciptのファイルを作成

つづいては、JavaSciptのファイルを作成していきます。
まずは、JavaSciptのファイルを紐づけていきましょう。
今回はjsというフォルダを作成して、その中に「sample.js」というファイルを作成しました。

ではこのファイルとHTMLファイルを紐づけていきます。
今回は<script src=”js/sample.js”></script>このコードを挿入すればOKです。

<body>
  <div id="test">これはテストです</div>
  <script src="js/sample.js"></script>
</body>

続いて、JavaSciptのコードを書いていきます。

//id="test"の要素を取得
let test = document.getElementById('test');

//id="test"の内容を書き換える
test.innerHTML = '要素を追加';

今回はgetElementByIdでid=”test”の要素を取得し、innerHTMLで要素の中身を書き換えていきます。

出力結果はこのようになります。

HTMLはこのように書き換わりました。

<div id="test">これはテストです</div>
↓
<div id="test">要素を追加</div>

おわりに

今回はJavaSciptでHTMLを操作する方法について見ていきました。
次は、JavaSciptでCSSを操作する方法について書こうと思います。

タイトルとURLをコピーしました