CODEWITHSUNDEEP
javascriptjqueryhtml
Travis L
Travis L

Reputation: 681

Jquery - appending html string to html string in variable

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.

Upvotes: 5

Views: 21006

Answers (6)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 6

Serge In&#225;cio
Serge In&#225;cio

Reputation: 1382

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

Regards

Upvotes: 0

Hasan Bayat
Hasan Bayat

Reputation: 946

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

Upvotes: 0

Pengcheng
Pengcheng

Reputation: 323

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

});

Upvotes: 0

Armin
Armin

Reputation: 1178

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

Upvotes: 1

Chillman
Chillman

Reputation: 55

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

Upvotes: 3

Related Questions