HOWTO · JavaScript
JavaScript でクラスを使用して要素を作成する
この記事では、JavaScript でドキュメント作成要素とは何か、およびクラスで HTML 要素を作成し、JavaScript の例を使用して CSS を割り当てる方法を学習します。
このページの内容
この記事では、JavaScript 関数を使用して HTML 要素を生成します。ボタンクリックイベントで関数を呼び出し、クラスを使用して要素を作成します。
JavaScript で要素を作成する
document.createElement() は、HTML タグ名のパラメータを文字列として受け取り、HTML 要素タイプのノードを作成するデフォルトのメソッドです。
これを使用して、任意の HTML 要素を作成し、それを DOM ツリーにアタッチできます。スタイル設定に id、content、CSS を割り当て、その要素を HTML ページの本体に追加できます。
基本構文：
let myElement = document.createElement(anyTag);
JavaScript でクラスを使用して要素を作成する
classList.add() メソッドを使用して、クラスを含む HTML 要素を作成できます。そのメソッドを使用して、要素に複数のクラスを追加することもできます。
メソッド add() は、クラスが HTML 要素にすでに存在する場合、クラスを渡します。appendChild() メソッドを使用して、HTML の本体に要素ノードを追加できます。
クラスの構文：
element.classList.add('bg-red', 'text-lg')
例：
<!DOCTYPE html>
<html>
<style>
.mystyle {
background-color: yellow;
padding: 10px;
}
</style>
<body>
<h1>Delftstack learning</h1>
<h2>Create element with class using JavaScript</h2>
<p>Click the button to create an element:</p>
<button onclick="createFunction()">Create</button>
<script>
function createFunction() {
let myDiv = document.createElement('div'); // element creation
myDiv.classList.add('mystyle'); // adding class
let content = document.createTextNode('This is a text content of an element!'); // text content
myDiv.appendChild(content); // append text content to element
document.body.appendChild(myDiv) // append element to body
}
</script>
</body>
</html>
上記の HTML ソースでは、button 要素を作成し、そのボタンのクリックイベントで createFunction() を呼び出しました。その関数では、document.createElement('div') メソッドを使用して div 要素を作成し、それを変数 myDiv に格納しています。
次に、myDiv.classList.add('mystyle') メソッドを使用してその要素にクラス mystyle を追加し、document.createTextNode() を使用して表示するテキストコンテンツを追加し、myDiv に追加しました。
最後に、document.body.appendChild(myDiv) を使用して、HTML ソースの本体に要素を追加します。上記のソースを html の拡張子で保存し、ブラウザで開いて例をテストできます。