[javascript] JavaScript에서 DOM 요소에 클래스를 추가하려면 어떻게해야합니까?

에 대한 클래스를 어떻게 추가 div합니까?

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

답변

new_row.className = "aClassName";

MDN에 대한 자세한 내용은 다음과 같습니다. className

답변

.classList.add()방법을 사용하십시오 :

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

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

스 니펫 확장

이 메서드는 className다른 클래스를 제거하지 않고 요소에 이미있는 경우 클래스를 추가하지 않기 때문에 속성을 덮어 쓰는 것보다 낫 습니다.

를 사용하여 클래스를 토글하거나 제거 할 수도 있습니다 element.classList( MDN 설명서 참조 ).

답변

다음은 함수 접근 방식을 사용하는 작업 소스 코드입니다.

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

답변

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

답변

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

답변

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

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

이것은 작동합니다 😉

출처

답변

또한 살펴볼 가치가 있습니다.

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