javascript createElement実行時にclassを設定する

作成日 2021.01.17
更新日 2022.08.01
javascript
javascript

javascriptで、createElement実行時にclassを設定するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. classを設定
3. classList.add
4. setAttribute
5. 存在しない要素に追加
6. 他の属性

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.134

Javascript サンプル集はこちら

classを設定

「class」を設定するには、「.className」を使用します。

<div id="main"></div>

<script>

const elm = document.createElement('p');

elm.className = 'class-name';

document.getElementById('main').appendChild(elm);

</script>

実行結果

関係ない話ですが、自分は、よく「.class」と書いてしまうことが多いのです。

const elm = document.createElement('p');

elm.class = "elm";

複数設定する場合は、以下のようにスペースで区切ります。

const elm = document.createElement('p');

elm.className = 'class-name1 class-name2';

document.getElementById('main').appendChild(elm);

実行結果

演算して複数の「class」を設定することも可能です。

const elm = document.createElement('p');

elm.className = 'class-name1 class-name2 ';
elm.className = elm.className + 'class-name3';

document.getElementById('main').appendChild(elm);

実行結果

同名の「class名」を指定した場合は、2つ生成されます。

const elm = document.createElement('p');

elm.className = 'class-name1 class-name1';

document.getElementById('main').appendChild(elm);

実行結果

classList.add

「classList.add」を使用しても同様の結果が得られ、カンマ区切りで複数のclassを設定することができます。「classList.add」が一番、使い勝手は良さそうと思います。

const elm = document.createElement('p');

elm.classList.add("class-name1","class-name2");

document.getElementById('main').appendChild(elm);

実行結果

ちなみに、こちらは同じクラス名を指定すると、重複を削除してくれます。

const elm = document.createElement('p');

elm.classList.add("class-name1","class-name1");

document.getElementById('main').appendChild(elm);

実行結果

setAttribute

「setAttribute」を使用しても同じ結果が得られます。

const elm = document.createElement('p');

elm.setAttribute('class', 'class-name1 class-name2');

document.getElementById('main').appendChild(elm);

実行結果

また、こちらは「.className」と同様に同名の「class名」を指定した場合は、2つ生成されます。

const elm = document.createElement('p');

elm.setAttribute('class', 'class-name1 class-name1');

document.getElementById('main').appendChild(elm);

実行結果

存在しない要素に追加

存在しない要素に「appendChild」を指定するとエラーとなるので、存在チェックが必要となります。

<div id="main"></div>

<script>

const elm = document.createElement('p');

elm.classList.add("class-name1","class-name2");

document.getElementById('no').appendChild(elm);
// Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

</script>

存在チェックをしておきます。

const elm = document.createElement('p');

elm.classList.add("class-name1","class-name2");

if(document.getElementById('no') !== null){

    document.getElementById('no').appendChild(elm);

}

他の属性

ちなみに、他の属性は以下のように指定することが可能です。

const elm = document.createElement('p');

// id
elm.id = 'id-name';

// class
elm.className = 'class-name';

// テキストデータ
elm.innerHTML = "text-data";

or

elm.textContent = "text-data";

// styleタグ
elm.style.cssText = "font-weight: bold;font-size: 30px";

実行結果