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 bining 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.

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 bining 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.

• javascript
• jquery
• html

6 Answers 6

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>

The append method of jquery append to DOM of the page. If you want to make more readble try this:

var thing = '<div class="thing">';
thing    += '<a href="#" class="close">close</a>';
thing    += '</div>';

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

You can create new DOM element, instead of string. This way you can easily append. Example:

$(document).ready(function(){
	$('body').on('click', 'button', function(){

        var thing	  =  jQuery('<div/>', {
            class: 'thing'
        });

        var close	  = jQuery('<a/>', {
            class: 'close',
            href: '#',
            text:'close'
        }).appendTo(thing);

    
	$('.canvas').append(thing);
            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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>

try this

$(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);
    $('.thing').append(close);
    return false;
});

});

This is so easy. you mistaken parseHTML method. it parses your html string into jquery object.

The solution is:

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

		var html = $.parseHTML(thing);
    $(html).append(close);
    
		$('.canvas').append(html);
    
		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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>

Just adding some code to @Zakaria Acharki's answer, just in case you want to close the created divs:

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

		thing = $(thing).append(close);
    
		$('.canvas').append(thing);
    
		return false;
	});

$('body').on('click', '.close', function(){
	$(this).parent().remove();
});
});

.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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>

Regards