Jquery - appending html string to html string in variable

Question

I am trying to create an HTML string and then modify that HTML string with extra HTML and attributes but it's not working. What am I doing wrong?

$(document).ready(function(){
    $('body').on('click', 'button', function(){
        var thing     = '<div class="thing"></div>';
        var close     = '<a href="#" class="close">close</a>';

        $(thing).append(close);

        $('.canvas').append(thing);

        return false;
    });
});

I did get it to work by combining the strings into one variable before appending them to the DOM but this makes what I'm doing harder to read. Is there any other way of doing this?

Here is a fiddle.

Answer 1

Updated fiddle.

You have to assign the return of this expression $(thing).append(close); to the variable thing like:

thing = $(thing).append(close);

Else the variable will always hold the default string <div class="thing"></div> as value.

Hope this helps.

$(document).ready(function(){
  $('body').on('click', 'button', function(){
    var thing	  = '<div class="thing"></div>';
    var close	  = '<a href="#" class="close">close</a>';

    $('.canvas').append( $(thing).append(close) );

    return false;
  });
});

.thing {
  width: 50px;
  height: 50px;
  background: red;
}

.close {
  background: blue;
  color: white;
}

.canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>