Создать div и добавить стиль

Question

У меня есть один большой div с id = "elements", и я загружаю из файла JSON новые элементы elements, и мне нужно, чтобы для каждого элемента создавался новый div внутри элементов (элементы div должны содержать много меньших div, для каждого маленького элемента div). Как поместить этот маленький div внутри одного большого div один за другим? Как добавить этот маленький divs стиль класса?

Answer 1

В Dojo (поскольку у вас есть тег dojo):

var div_elements = dojo.byId("elements");

dojo.forEach(json_data.items, function(item) {
    dojo.create("div", { "class":"whatever " + item.classNames }, div_elements);
});

Конечно, вы можете поместить что-нибудь в качестве класса для вашего div.Я только что привел пример.Во втором аргументе dojo.create вы передаете хеш, содержащий все свойства, которые вы хотите иметь div.

Answer 2

Создайте новый элемент DOM примерно так:

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

Затем добавьте к внешнему элементу div так:

var insertedElement = div.insertBefore(childDiv, null);

После этого вы продолжите создавать childDivs, перебирая данные JSON, и вставляя их в узел div, как указано выше.

Answer 3

Для этого есть простые функции jQuery:

var box= $("#elements");
    // create elements
    for (var i=0; i<items.length; i++) {
        var t = $("<div class=\"element\" id=\"item_"+i+"\">"+items[i]['text']+"</div>");
        box.append(t);
    }

Это то, что вы ищете?

Answer 4

Я думаю, вам нужно что-то вроде этого:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>

<script type="text/javascript">

$(document).ready(function(){

json_data = 'Hey';

$('#elements').append('<div class="in_elements">' + json_data + '</div>');

});

</script>

<div id="elements">

</div>

Проверьте это