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.

Zakaria Acharki · Accepted Answer · 2017-02-24 15:55:08Z

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

edited Feb 24, 2017 at 15:55

answered Feb 24, 2017 at 15:07

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chillman · Accepted Answer · 2017-02-24 15:09:59Z

3

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

answered Feb 24, 2017 at 15:09

Chillman

553 bronze badges

Comments

Armin · Accepted Answer · 2017-02-24 15:14:09Z

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>

Pengcheng · Accepted Answer · 2017-02-24 15:15:54Z

0

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

});

answered Feb 24, 2017 at 15:15

Pengcheng

3231 silver badge5 bronze badges

Comments

Hasan Bayat · Accepted Answer · 2017-02-24 15:31:28Z

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>

Serge Inácio · Accepted Answer · 2017-02-24 15:34:59Z

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

Collectives™ on Stack Overflow

Jquery - appending html string to html string in variable

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related