253

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

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

javascript dom

— 와
소스

6

스펙이 너무 나쁘면 클래스를 createElement에 대한 매개 변수로 지정할 수 없습니다.

— Gaʀʀʏ

당신이 클래스를 추가하려면 다른 클래스를 제거하지 않고 , 볼 이 답변을 .

— Michał Perłakowski

447

new_row.className = "aClassName";

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

— Darko Z
소스

5

여러 클래스 이름을 설정하는 것은 어떻습니까?

— Simon

5

@Sponge new_row.className = "aClassName1 aClassName2";은 그저 속성 일뿐 입니다. 유효하지 않은 HTML을 만들더라도 원하는 문자열을 지정할 수 있습니다.

— Darko Z

16

또한 new_row.classList.add('aClassName');여러 클래스 이름을 추가 할 수 있으므로 권장 합니다.

— StevenTsooo

@StevenTsooo 주 classList입니다 지원되지 않는 IE9 또는 아래.

— dayuloli

한 줄의 코드로 클래스 이름으로 요소를 생성하고 요소에 대한 참조를 얻는 방법이 있습니까? 예를 들어 : 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

다시 "창조하면서" 당신이 뜻 : "생성되는 동안" ? 의견이 아닌 여기에서 답변 을 수정하여 응답 하십시오. 미리 감사드립니다.

— 피터 Mortensen

순서대로 설명하겠습니다. 예를 들어 "함수 접근" 이란 무엇입니까? 정교하게 설명 할 수 있습니까 ( 댓글이 아닌 답변 을 편집하여 )? 미리 감사드립니다.

— 피터 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

왜 이것을 게시했는지 설명해보십시오. 다른 사람들이 배우는 데 도움이됩니다.

— Thomas Smyth

이것은 기본 JavaScript / vanilla JavaScript이므로 다른 라이브러리 나 프레임 워크가 필요하지 않기 때문에 투표했습니다.

— obotezat

순서대로 설명하겠습니다.

— Peter Mortensen

1

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

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

이것은 작동합니다 ;-)

출처

— 페드로 프로그래머
소스

이 방법이 모든 브라우저에서 작동하는 것은 아니므로이 방법은 적합하지 않습니다. 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 요소에 클래스를 추가하려면 어떻게해야합니까?

크로스 브라우저 솔루션