253

のクラスを追加するにはどうすればよいdivですか？

var new_row = document.createElement('div');

javascript dom

— ワオ
ソース

6

仕様が悪すぎて、クラスをcreateElementのパラメーターとして指定できません。

— Gaʀʀʏ

他のクラスを削除せずにクラスを追加する場合は、この回答を参照してください。

— のMichałPerłakowski

447

new_row.className = "aClassName";

MDNの詳細は次のとおりです： className

— ダーコZ
ソース

5

複数のクラス名を設定するのはどうですか？

— Simon

5

@Spongeはnew_row.className = "aClassName1 aClassName2";その単なる属性であり、無効なhtmlになっても、好きな文字列を割り当てることができます

— Darko Z

16

new_row.classList.add('aClassName');複数のクラス名を追加できるのでお勧めします

— StevenTsooo

@StevenTsooo IE9 以前でclassListはサポートされていないことに注意してください。

— dayuloli、2015年

1行のコードでクラス名を持つ要素を作成し、それでも要素への参照を取得する方法はありますか？例：myEL = document.createElement（ 'div'）。addClass（ 'yo'） 'は機能しません。

— Kokodoko

36

次の.classList.add()方法を使用します。

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);

<div class="foo"></div>

スニペットを展開

このメソッドはclassName、他のクラスを削除せず、要素にすでにクラスがある場合はクラスを追加しないため、プロパティを上書きするよりも優れています。

を使用してクラスを切り替えたり削除したりすることもできますelement.classList（MDNのドキュメントを参照）。

— ミハウ・ペルチャコフスキー
ソース

28

これは、関数アプローチを使用した作業用ソースコードです。

<html>
    <head>
        <style>
            .news{padding:10px; margin-top:2px;background-color:red;color:#fff;}
        </style>
    </head>

    <body>
    <div id="dd"></div>
        <script>
            (function(){
                var countup = this;
                var newNode = document.createElement('div');
                newNode.className = 'textNode news content';
                newNode.innerHTML = 'this created div contains a class while created!!!';
                document.getElementById('dd').appendChild(newNode);
            })();
        </script>
    </body>
</html>

— サニーSM
ソース

8

そう？これは一例であり、何も問題はありません。

— Carey

再「作成しながら、」あなたは意味ですか：「作成された状態で」？ここではコメントではなく、回答を編集して返信します。前もって感謝します。

— Peter Mortensen、

説明が正しいでしょう。たとえば、「関数アプローチ」とはどういう意味ですか？詳しく説明できますか（ここではコメントでなく、回答を編集して）？前もって感謝します。

— Peter Mortensen、

15

JavaScriptでこれを行うDOMの方法もあります。

// Create a div and set class
var new_row = document.createElement("div");
new_row.setAttribute("class", "aClassName");
// Add some text
new_row.appendChild(document.createTextNode("Some text"));
// Add it to the document body
document.body.appendChild(new_row);

— ハッセビョーク
ソース

2

var newItem = document.createElement('div');
newItem.style = ('background-color:red'); 
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);

— ディエゴ・スリンガー
ソース

2

これを投稿した理由を説明することを検討してください。他の人が学ぶのに役立ちます。

— トーマス・スミス2017

これはネイティブJavaScript /バニラJavaScriptであり、他のライブラリやフレームワークを必要としないため、賛成票が入りました。

— obotezat

説明が正しいでしょう。

— Peter Mortensen、

1

var new_row = document.createElement('div');

new_row.setAttribute("class", "YOUR_CLASS");

これは動作します;-)

ソース

— PedroProgrammer
ソース

このアプローチはすべてのブラウザで機能するわけではないため、これは良い解決策ではありません。setAttributeは、現在使用されているブラウザの60％のみでサポートされています。caniuse.com/#search=setAttribute

— Ragas

0

また、一見の価値があります。

var el = document.getElementById('hello');
if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
}

— ヨニ
ソース

説明が正しいでしょう。

— Peter Mortensen、

0

たとえば、次のfileタイプで新しい入力フィールドを作成する場合：

 // Create a new Input with type file and id='file-input'
 var newFileInput = document.createElement('input');

 // The new input file will have type 'file'
 newFileInput.type = "file";

 // The new input file will have class="w-95 mb-1" (width - 95%, margin-bottom: .25rem)
 newFileInput.className = "w-95 mb-1"

出力は次のようになります。 <input type="file" class="w-95 mb-1">

あなたはJavaScriptを使用して、ネストされたタグを作成したい場合は、最も簡単な方法はですinnerHtml：

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

出力は次のようになります。

<li>
    <span class="toggle">Jan</span>
</li>

— マイル・ミハトビッチ
ソース

0

クロスブラウザソリューション

注：このclassListプロパティはInternet Explorer 9ではサポートされていません。次のコードはすべてのブラウザーで機能します。

function addClass(id,classname) {
  var element, name, arr;
  element = document.getElementById(id);
  arr = element.className.split(" ");
  if (arr.indexOf(classname) == -1) { // check if class is already added
    element.className += " " + classname;
  }
}

addClass('div1','show')

ソース：jsクラスを追加する方法

— ラビ・マクワナ
ソース

-3

これも機能します。

$(document.createElement('div')).addClass("form-group")

— ムハンマドアワイス
ソース

5

jQueryを使用している場合のみ。

— Dan Nguyen

1

投稿していただきありがとうございます。これでうまくいきました。jqueryソリューションが必要でした。

— midknyte

JavaScriptでDOM要素にクラスを追加するにはどうすればよいですか？

クロスブラウザソリューション