CODEWITHSUNDEEP
jquery
Addy
Addy

Reputation: 11

Generating div,ul,li,a tag combination dynamically using jquery

My Jade! https://lh4.googleusercontent.com/-hzRqciA1Tjs/UGmc39ijHuI/AAAAAAAAAFk/0XJzY0ZqU70/s720/App.jpg

div(data-role='content')
   div(class='content-primary')
      ul(data-role="listview", data-split-theme='a',data-split-icon='gear')
         li(data-theme='a')
          a(href="")
            div(id='addClientDivId')
          a(href='#', data-icon='delete', title=' Delete ')

I wanna generate the above jade contents dynamically using jquery. Can anyone help me..???

As i dont have reputation, I have uploaded a image screenshot to picasa.Refer the screenshot. I have tried all the possibilities given below, but couldn get the effects as on the screenshot.

Answer:

I have found solution for my query.

var newContent = '<div data-role="content" data-theme="a" class="content-primary">';
        newContent += '<ul data-role="listview" data-split-theme="a" data-inset="true" id="ulId">';
        newContent += '<li>';
        newContent += '<a href="">';
        newContent += '<h4></h4>';
        newContent += '<h5></h5>';
        newContent += '<a href="" , data-icon="delete">';
        newContent += '</a>';
        newContent += '</a>';
        newContent += '</li>';
        newContent += '</ul>';
        newContent += '</div>';
        $("#addClientDivId").append(newContent).trigger('create');

Upvotes: 0

Views: 1692

Answers (3)

The Alpha
The Alpha

Reputation: 146201

You may try this

var aMain=$('<a/>', {
    'text':'Delete',
    'href':'',
    'data-icon':'delete',
    'title':' Delete '
});
var acDivid=$('<div id="addClientDivId"></div>');
var a=$('<a href=""></a>');
var li=$('<li data-theme="a"></li>');
var ul=$('<ul />', {
   'data-role':'listview',
   'data-split-theme':'a',
   'data-split-icon':'gear'
});
var cP=$('<div class="content-primary"></div>');
var content=$('<div data-role="content"></div>');
$('body').append(content.append(cP.append(ul.append(li.append(a.append(acDivid.append(aMain)))))));

DEMO.

Upvotes: 0

chrisd84
chrisd84

Reputation: 111

You could either build each tag as a separate jQuery object:

var contentDiv = $('<div></div>').attr('data-role','content');
var contentPrimary = $('<div></div>').attr('class', 'content-primary');
var ul = $('<ul></ul>');
$(ul).attr('data-role', 'listview').attr('data-split-theme', 'a').attr('data-split-icon','gear');

Then add your li(s) to your ul ..

for(..) {
   var li = $('<li></li>');
   var liContent = $('<a></a>').attr('href', 'a');
   // You can build the rest of your li content here.

   // Append the li content to the li
   $(li).append(liContent);

   // And then append the li to the ul
   $(ul).append(li);
}

Once done with the ul you can compose the rest.

$(contentPrimary).append(ul);
$(contentDiv).append(contentPrimary);

Then add everything to the DOM, let's say inside the body

$('body').append(contentDiv);

To make things more performant you could, build your entire structure as a string (concat with '+') and then add it to the DOM.

var contentDivAsString = '<div data-role="content">....</div>';
$('body').append($(contentDivAsString));

Either approach would work, just the second one would be more performant and you'd use less objects to accomplish it.

Upvotes: 1

Gregor Weber
Gregor Weber

Reputation: 688

Just save the html in a string like this one: content = "<div data-role='content'">[...]</div> and if you want to just add it to the body $("body").append(content)

Otherwise check out the documentation about selector: http://api.jquery.com/category/selectors/

Upvotes: 0

Related Questions