253

Wie füge ich eine Klasse für die hinzu div?

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

javascript dom

— Beeindruckend
quelle

6

Schade, dass die Spezifikation nicht zulässt, dass Klassen als Parameter für createElement angegeben werden.

— Gaʀʀʏ

Wenn Sie eine Klasse hinzufügen möchten, ohne andere Klassen zu entfernen , lesen Sie diese Antwort .

— Michał Perłakowski

447

new_row.className = "aClassName";

Hier finden Sie weitere Informationen zu MDN: className

— Darko Z.
quelle

5

Was ist mit dem Festlegen mehrerer Klassennamen?

— Simon

5

@ Sponge es ist new_row.className = "aClassName1 aClassName2";nur ein Attribut, Sie können eine beliebige Zeichenfolge zuweisen, auch wenn es für ungültige HTML führt

— Darko Z

16

Ich würde auch empfehlen, new_row.classList.add('aClassName');da Sie dann mehrere Klassennamen hinzufügen können

— StevenTsooo

@StevenTsooo Beachten Sie, dass classListist nicht unterstützte in IE9 oder unten.

— Dayuloli

Gibt es eine Möglichkeit, ein Element mit einem Klassennamen in einer Codezeile zu erstellen und trotzdem einen Verweis auf das Element zu erhalten? Beispiel: myEL = document.createElement ('div'). addClass ('yo') 'funktioniert nicht.

— Kokodoko

36

Verwenden Sie die .classList.add()Methode:

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

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

Erweitern Sie das Snippet

Diese Methode ist besser als das Überschreiben der classNameEigenschaft, da sie keine anderen Klassen entfernt und die Klasse nicht hinzufügt, wenn das Element sie bereits hat.

Sie können Klassen auch mit umschalten oder entfernen element.classList(siehe MDN-Dokumentation ).

— Michał Perłakowski
quelle

28

Hier arbeitet der Quellcode mit einem Funktionsansatz.

<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>

— Sunny SM
quelle

8

So? Es dient als Beispiel, daran ist nichts auszusetzen.

— Carey

Re "während erstellt" : Meinst du "während erstellt" ? Antworten Sie , indem Sie Ihre Antwort bearbeiten , nicht hier in den Kommentaren. Danke im Voraus.

— Peter Mortensen

Eine Erklärung wäre angebracht. Was meinen Sie zum Beispiel mit "einem Funktionsansatz" ? Können Sie näher darauf eingehen (indem Sie Ihre Antwort bearbeiten , nicht hier in den Kommentaren)? Danke im Voraus.

— Peter Mortensen

15

Es gibt auch die DOM-Methode, um dies in JavaScript zu tun:

// 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);

— Hasse Björk
quelle

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]);

— Diego Slinger
quelle

2

Erklären Sie, warum Sie dies gepostet haben, damit andere besser lernen können.

— Thomas Smyth

gewählt, weil dies natives JavaScript / Vanille-JavaScript ist und keine anderen Bibliotheken oder Frameworks benötigt.

— Obotezat

Eine Erklärung wäre angebracht.

— Peter Mortensen

1

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

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

Das wird funktionieren ;-)

Quelle

— PedroProgrammer
quelle

Dies ist keine gute Lösung, da dieser Ansatz nicht in allen Browsern funktioniert. setAttribute wird heute nur von 60% der verwendeten Browser unterstützt. caniuse.com/#search=setAttribute

— Ragas

0

Es lohnt sich auch einen Blick darauf zu werfen:

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

— Yoni
quelle

Eine Erklärung wäre angebracht.

— Peter Mortensen

0

Wenn Sie ein neues Eingabefeld erstellen möchten, geben Sie beispielsweise fileFolgendes ein:

 // 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"

Die Ausgabe wird sein: <input type="file" class="w-95 mb-1">

Wenn Sie ein verschachteltes Tag mit JavaScript erstellen möchten, ist der einfachste Weg innerHtml:

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

Die Ausgabe wird sein:

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

— Meile Mijatović
quelle

0

Browserübergreifende Lösung

Hinweis: Die classListEigenschaft wird in Internet Explorer 9 nicht unterstützt . Der folgende Code funktioniert in allen Browsern:

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')

Quelle: Wie füge ich eine Klasse hinzu?

— Ravi Makwana
quelle

-3

Dies wird auch funktionieren.

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

— Muhammad Awais
quelle

5

Nur wenn Sie jQuery verwenden.

— Dan Nguyen

1

Vielen Dank für die Veröffentlichung, das hat bei mir funktioniert, ich brauchte eine jquery-Lösung.

— Midknyte

Wie kann ich einem DOM-Element in JavaScript eine Klasse hinzufügen?

Browserübergreifende Lösung