JavaScript でクラスを使用して要素を作成する
この記事では、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 の拡張子で保存し、ブラウザで開いて例をテストできます。