JavaScript를 사용하여 div를 만들고 스타일을 어떻게 지정할 수 있습니까?

JavaScript를 사용하여 내용으로 div를 만들고 스타일을 지정하고 페이지에 추가하려면 어떻게해야합니까? 가능하다는 것을 알고 있지만 어떻게?

var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";

document.getElementById("main").appendChild(div);

<body>
<div id="main"></div>
</body>

var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";

document.getElementById("main").appendChild(div);
OR
document.body.appendChild(div);

대신 부모 참조를 사용하십시오 document.body.

어떻게하는지에 따라 다릅니다. 순수한 자바 스크립트 :

var div = document.createElement('div');
div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
div.style.color = 'red';
// better to use CSS though - just set class
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);

jquery를 사용하여 동일한 작업을 수행하는 것은 매우 쉽습니다.

$('body')
.append('my DOM manupulation skills dont seem like a big deal when using jquery')
.css('color', 'red').addClass('myclass');

건배!

다른 답변이 작동하지만 내용이있는 div를 요청한 것으로 나타났습니다. 추가 콘텐츠가 포함 된 내 버전이 있습니다. 하단의 JSFiddle 링크.

자바 스크립트 (댓글 포함):

// Creating a div element
var divElement = document.createElement("Div");
divElement.id = "divID";

// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
divElement.style.paddingTop = "15px";

// Adding a paragraph to it
var paragraph = document.createElement("P");
var text = document.createTextNode("Another paragraph, yay! This one will be styled different from the rest since we styled the DIV we specifically created.");
paragraph.appendChild(text);
divElement.appendChild(paragraph);

// Adding a button, cause why not!
var button = document.createElement("Button");
var textForButton = document.createTextNode("Release the alert");
button.appendChild(textForButton);
button.addEventListener("click", function(){
    alert("Hi!");
});
divElement.appendChild(button);

// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);

HTML :

<body>
  <h1>Title</h1>
  <p>This is a paragraph. Well, kind of.</p>
</body>

CSS :

h1 { color: #333333; font-family: 'Bitter', serif; font-size: 50px; font-weight: normal; line-height: 54px; margin: 0 0 54px; }

p { color: #333333; font-family: Georgia, serif; font-size: 18px; line-height: 28px; margin: 0 0 28px; }

참고 : Ratal Tomal에서 빌린 CSS 행

JSFiddle : https://jsfiddle.net/Rani_Kheir/erL7aowz/

이 솔루션은 jquery 라이브러리를 사용합니다.

$('#elementId').append("<div class='classname'>content</div>");

내가 사용할 하나의 솔루션이 있습니다.

var div = '<div id="yourId" class="yourClass" yourAttribute="yourAttributeValue">blah</div>';

속성 및 / 또는 속성 값이 변수를 기반으로하려는 경우 :

var id = "hello";
var classAttr = "class";
var div = '<div id='+id+' '+classAttr+'="world" >Blah</div>';

그런 다음 본문에 추가하십시오.

document.getElementsByTagName("body").innerHTML = div;

파이처럼 쉽습니다.

이렇게 만들 수 있습니다

board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"

document.getElementById("main").appendChild(board);

실행 가능한 스 니펫 :

var board;
board= document.createElement("div");
board.id = "mainBoard";
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"
    
document.getElementById("main").appendChild(board);

<body>
<div id="main"></div>
</body>

ID 이름으로 div 생성

var divCreator=function (id){
newElement=document.createElement("div");
newNode=document.body.appendChild(newElement);
newNode.setAttribute("id",id);
}

div에 텍스트 추가

var textAdder = function(id, text) {
target = document.getElementById(id)
target.appendChild(document.createTextNode(text));
}

테스트 코드

divCreator("div1");
textAdder("div1", "this is paragraph 1");

산출

this is paragraph 1

내가하고 싶은 또 다른 일은 객체를 만든 다음 객체를 반복하고 스타일을 설정하는 것입니다. 왜냐하면 모든 단일 스타일을 하나씩 작성하는 것이 지루할 수 있기 때문입니다.

var bookStyles = {
   color: "red",
   backgroundColor: "blue",
   height: "300px",
   width: "200px"
};

let div = document.createElement("div");

for (let style in bookStyles) {
 div.style[style] = bookStyles[style];
}

body.appendChild(div);