0

I'm trying to append text and a nested div to the end of a list-group, I wand to get HTML output like this:

<div class="list-group-item">
  <div class="small>
    Username
    <div class="pull-right">
      <a class="btn btn-link btn-xs" href="url">edit</a>
    </div>
  </div>
</div>

Most of my jQuery code is based on the accepted solution from this post and this is what I've currently got:

$('<div>').attr('class', 'list-group-item').html(
  $('<div>').attr('class', 'small').text('Username').html(
    $('<div>').attr('class', 'pull-right').html($('<a>').attr({
          'class': 'btn btn-link btn-xs', 
          'href': 'url'
    }).text('edit')))).appendTo(this.find('.list-group'));

Everything appends except for the Username text, yet if I strip everything out after the username and run this code:

$('<div>').attr('class', 'list-group-item').html(
  $('<div>').attr('class', 'small').text('Username'))
.appendTo(this.find('.list-group'));

The Username text is successfully appended. What am I missing to get them all to append? Thanks.

Community
  • 1
  • 1
Ross
  • 3
  • 2

2 Answers2

0

I've tried your code and I think your problem come from the fact that you use a .html(...) directly on your .text('Username'), so the .text('Username') is erased by the first one. So you can do this with something like that (tested on my side):

$('<div>')
            .attr('class', 'list-group-item')
            .html('Username' +
                $('<div>')
                .attr('class', 'small')
                .html(
                    $('<div>').attr('class', 'pull-right').html(
                        $('<a>').attr({
                              'class': 'btn btn-link btn-xs', 
                              'href': 'url'
                        }).text('edit')
                    )
                ).html()
            )
            .appendTo(this.find('.list-group'));

The part:

.html(
                    $('<div>').attr('class', 'pull-right').html(
                        $('<a>').attr({
                              'class': 'btn btn-link btn-xs', 
                              'href': 'url'
                        }).text('edit')
                    )
                )

will construct your div 'pull-right' and its content. Then, making it followed by a simple .html(), it will return its html content as a string that you can concatenate with your string 'Username'.

Maybe it isn't the pretty way to do this, but it appears to work.

EDIT:

Ok, I'm sorry @Ross , you're right with the div "small" not created. It appears the .html() is the culprit, 'killing' the div to which it is attached in this case. So using .text('Username') and then .append(myHtmlCode...) makes it all working for me, like this :

$('<div>').attr('class', 'list-group-item')
            .html(
                $('<div>').attr('class', 'small')
                .text('Username')
                .append(
                    $('<div>').attr('class', 'pull-right')
                    .html(
                        $('<a>').attr({
                              'class': 'btn btn-link btn-xs', 
                              'href': 'url'
                        }).text('edit')
                    )
                )
            )
            .appendTo(this.find('.list-group'));
Banov
  • 287
  • 3
  • 15
  • This partially worked for me, except the
    isn't created. I was able to get the output I wanted though by moving the username into the next .html and taking the pull-right class out of that div and putting it in with the btn btn-link and btn-xs classes.
     – Ross Dec 03 '14 at 21:59
0

i'd go for the easy way:

 $(document).ready(function(){

        var html = '<div class="list-group-item"><div class="small">Username<div class="pull-right"><a class="btn btn-link btn-xs" href="url">edit</a></div></div></div>';

    $(html).appendTo('#appender');                      

    });

jsfiddle:

http://jsfiddle.net/0vg97uhy/

j.rey
  • 121
  • 1
  • 6