Я пытаюсь создать несколько элементов div в JQuery. Я пробовал решения ниже.
создать html с jquery
Создание элемента div в jQuery
Мне нужно создать ниже элемент html в jquery
<div class="r-c-grid ">
<div class="r-c-imgmask">
<img src="http://example.com/images/path.jpg">
</div>
<div class="r-c-gradient"></div>
<h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>
</div>
Я могу сделать это с помощью вышеупомянутых решений, но это сложнее. Может кто-нибудь подскажет мне, есть ли лучший способ сделать это в последнем jquery.
Вы можете добавить весь блок за один проход следующим образом:
$('body').append('\
<div class="r-c-grid "> \
<div class="r-c-imgmask"> \
<img src="http://example.com/images/path.jpg"> \
</div> \
<div class="r-c-gradient"></div> \
<h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3> \
</div> \
');
Обратите внимание, что обратная косая черта необходима, чтобы разбивать такую строку на несколько строк, не вызывая синтаксических ошибок. Это эффективно комментирует разрывы строк.
var str='<div class="r-c-grid ">'
+'<div class="r-c-imgmask">'
+' <img src="http://example.com/images/path.jpg">'
+'</div>'
+'<div class="r-c-gradient"></div>'
+'<h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>'
+'</div>';
$(str).appendTo(yourselector);
или можете попробовать
$(yourselector).append(str);
СМОТРЕТЬ ДЕМО
ссылка append() и appendTo()
Вы имеете в виду что-то полудинамичное?
function addDiv(parentId, img, link, text){
var div = '<div class="r-c-grid "><div class="r-c-imgmask">'+
'<img src="http://example.com/images/'+img+'">'+
'</div><div class="r-c-gradient"></div>'+
'<h3 class="r-c-grid-title">'+
'<a href='+link+'>'+text+'</a></h3></div>';
document.getElementById(parentId).innerHtml += div;
}
Просто попробуйте это,
$('body').append('<div class="r-c-grid ">
<div class="r-c-imgmask">
<img src="http://example.com/images/path.jpg">
</div>
<div class="r-c-gradient"></div>
<h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>
</div>');
Или попробуйте,
$rci=$('<div class="r-c-imgmask" />')
.append('<img src="http://example.com/images/path.jpg">');
$rcg=$('<div class="r-c-gradient" />');
$h3=$('<h3 class="r-c-grid-title" />')
.append('<a href="http://example.com/link.php">Post Title</a>');
$rc=$('<div class="r-c-grid " />').append($rci, $rcg, $h3);
$('body').append($rc);
$( )
..