wake-up-neo.net

Wie füge ich eine Klasse zu einem DOM-Element in JavaScript hinzu?

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

var new_row = document.createElement('div');
javascriptdom
191
wow
new_row.className = "aClassName";

Hier gibt es mehr Informationen zu MDN: className

353
Darko Z

Hier arbeitet der Quellcode mit dem 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 class while created!!!';
            document.getElementById('dd').appendChild(newNode);           
        })();
    </script>
</body>
</html>
23
Sunny S.M

Verwenden Sie die .classList.add()-Methode:

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);
<div class="foo"></div>

Diese Methode ist besser als das Überschreiben der className -Eigenschaft, da andere Klassen nicht entfernt werden und die Klasse nicht hinzugefügt wird, wenn das Element bereits über diese verfügt.

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

18
Michał Perłakowski

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 );
14
Hasse Björk
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
Diego Slinger

Wenn Sie ein neues Eingabefeld mit beispielsweise dem Typ file erstellen möchten

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

 // New input file will have type file
 newFileInput.type = "file"; 

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

Ausgabe wird sein:

<li>
    <span class="toggle">Jan</span>
</li>
0
Mile Mijatovic

Auch einen Blick wert

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