Вставка HTML в классы div

У меня есть серия div отображается с помощью jquery var и тогда divs перемещаются через nth-child когда ширина браузера меняется.

Вот код var, который отображает div.

var theDivs={
"div1":$("<div />").addClass("test"),
"div2":$("<div />").addClass("test2"),
"div3":$("<div />").addClass("test3"),
"div4":$("<div />").addClass("test4")
};

Итак, я создаю 4 деления, а затем добавляю серию "тестовых" классов. Это прекрасно работает, но вместо того, чтобы просто добавить имя класса div, я хотел бы иметь возможность добавить немного HTML, так же, как .after код.. например:

$( '.somedivclass' ).after( '<div class="test"><a href="#"></a></div>');

Вот полный пример моего текущего кода (измените размер HTML-окна, чтобы увидеть изменение положения divs nth-child):

http://jsfiddle.net/EUqEm/85/

Так что да, я хотел бы иметь возможность добавлять свой HTML-код в тестовые элементы div, в то же время заставляя его работать с текущим кодом, который у меня есть (см. Мой jsfiddle), где элементы div изменяют положение при изменении ширины браузера.

Любой вклад или помощь будут потрясающими, а рабочая jquery будет еще лучше!:)

Источник

2 ответа

Решение

Ты можешь использовать .html() чтобы добавить контент HTML в ваш div элементы.

var theDivs={
    "div1":$("<div />").addClass("test").html('<span>RED</span>'),
    "div2":$("<div />").addClass("test2").html('<span>BLUE</span>'),
    "div3":$("<div />").addClass("test3").html('<span>GREEN</span>'),
    "div4":$("<div />").addClass("test4").html('<span>PURPLE</span>')
};

Чтобы гарантировать, что контент удаляется при изменении размера, вы можете использовать .empty(),

$("#wrapper div").attr("class","inner").empty();

jsfiddle

Источник

Вы имеете в виду это?

var theDivs={
"div1":$("<div />").addClass("test").text('Some text'),
"div2":$("<div />").addClass("test2").text('Some text'),
"div3":$("<div />").addClass("test3").text('Some text'),
"div4":$("<div />").addClass("test4").text('Some text')
};
Источник
Другие вопросы по тегам