Почему не работает appendchild со стилями?

Question

[Кирилл Карпик]

Здравствуйте. Есть контейнер div c id="container", который надо заполнить элементами с номером. Это должно быть динамическое добавление элементов, так как не известно количество этих элементов, но их много. И вот тут проблема, вместе с appendChild не работают стили, ни через node.style, ни через node.className, ни через node.classList.add. Указывать в самом css файле стили div'ам через #container div - тоже не помогает. Как заставить работать стили? Не обязательно создавать именно div, но с другими тэгами тоже не работает. Подскажите, пожалуйста, какие решения?

var container = document.getElementById("container");

for (var i = 0; i < data.length; i++) {
	var node = document.createElement("div");
	node.innerHTML = i;
	node.style.width = "40px";

	container.appendChild(node);
}

Comments

[Антон Спирин]

Представленный код вполне корректный. Ищите проблему за его пределами. Советую поскорей научиться пользоваться панелью разработчика в браузере.

[Алексей Юдов]

И хотя бы jquery :D

[Сергей delphinpro]

Что же у вас там не работает? https://jsfiddle.net/7h123vfp/

Answer 1

[Кирилл Карпик]

Спасибо всем за помощь, код действительно работал как надо) Проблема была в том что у #container был display: flex; и похоже, он flex работает с appendChild неправильно

Answer 2

[dollar]

Например, если где-то определить такой стиль, то он всё испортит:

#container div {
  width: 10px !important;
}

А так может быть, что угодно. Например, другой JS код аналогичным образом заменяет стили на свои.

Answer 3

[Артем Зеневич]

Я решил это так, надеюсь я правильно Вас понял.