Как я могу создать и стилизовать div, используя JavaScript?

174

Как я могу использовать JavaScript для создания и добавления (и добавления на страницу) div с контентом? Я знаю, что это возможно, но как?

javascript

— Фелипе Брам
источник

См. Также stackoverflow.com/questions/5927012/…

— Сиз Тиммерман

273

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.

— Игорь Дымов
источник

Я знаю, что это старо, но добавление класса и связанного с ним CSS было бы более современным подходом, но это другой вопрос.

— Марк

63

Зависит от того, как ты это делаешь. Чистый JavaScript:

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

Ура!

— jrharshath
источник

4

Я бы не сказал, что jQuery проще, в основном он короче. Но вместо использования setAttribute для класса я бы использовал div.className = 'myclass';

— Даан Уилмер

4

JQuery намного проще, когда вы начинаете разрабатывать тяжелые интерфейсы JavaScript. учитывая, что он охватывает функциональную модель программирования с самого начала, он заставляет ваш код выглядеть и вести себя функционально.

— Показательный

3

Называть jQuery «функциональным» - это серьезная проблема. Как вы определяете функциональную модель и как, по вашему мнению, ее использует jQuery?

JQuery отлично, если у вас есть 10 строк в вашем приложении. Добро пожаловать в ад, если вы создадите серьезное приложение с его помощью. Краткость автоматически не является хорошим программированием /

— Hal50000

часть jQuery здесь не добавляет, divпоэтому не отвечает на вопрос

— Mark Schultheiss

10

В то время как другие ответы здесь работают, я заметил, что вы попросили div с контентом. Итак, вот моя версия с дополнительным контентом. Ссылка JSFiddle внизу.

JavaScript (с комментариями):

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

Примечание: CSS строки заимствованы из Ratal Tomal

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

— Рани Хейр
источник

9

это решение использует библиотеку jquery

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

— баннеры
источник

14

Смешно выглядящий Javascript.

— TheCarver

5

Вот одно решение, которое я бы использовал:

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;

Проще простого.

— Питер
источник

Что я должен написать на HTML-странице?

— Г-жа Нахидуззаман Роуз

1

Нам нужно указать [0]при использовании getElementsByTagName(). (Слишком коротко для редактирования)

— HKJeffer

2

Вы можете создать так

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

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

Полный Runnable Snippet:

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>

Развернуть фрагмент

— Махеш К
источник

2

создать 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

— wly185
источник

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

— Кеннет
источник