Создать элемент div в цикле в jquery

Question

Я пытаюсь создать несколько элементов div в JQuery. Я пробовал решения ниже.

create html with jquery
Creating a div element in 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> 

Я могу сделать это с помощью описанных выше способов, но это более complicated.Can кто-нибудь предложить мне, есть ли лучший способ сделать это в последнем jquery.

Answer 1

Вы можете добавить весь блок в один присест следующим образом:

$('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> \ 
'); 

Обратите внимание, что обратная косая черта необходимы разбить строку, как это на несколько линии, не вызывая синтаксических ошибок. Это эффективно комментирует разрывы строк.

Answer 2

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

СМ DEMO

ссылочный append() и appendTo()

Answer 3

Просто попробуйте это,

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

Answer 4

Вы имеете в виду что-то полудинамичное?

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