How to append a variable to an html element in jQuery

Question

I am just simply trying to append a variable to an html element using jquery. Where am I going wrong?

var simple = $('<p> hello </p>');
$('.easy').append(simple);

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

Thanks so much!

I placed your code in an executable snippet and it appears to work fine. If your code isn't working you need to ensure you've added a reference to jquery.js in the page and also that you're running your code in a document.ready event handler (which the snippet is adding automatically) — Rory McCrossan, Nov 24 '17 at 19:42

score 2 · Answer 1 · answered Nov 24 '17 at 19:42

2

Your var simple should be a string, without the $.

var simple = "<p>hello</p>";
$(".easy").append(simple);

answered Nov 24 '17 at 19:42

pmkro

2

This may be better code, but it's not an issue that would stop the OPs code working - as you can see from the snippet in the question – Rory McCrossan Nov 24 '17 at 19:43
2

append works with both html strings and jQuery elements. I see no benefit to this answer. – iGanja Nov 24 '17 at 19:58

Lwin Htoo Ko · Answer 2 · 2017-11-24T19:59:49.983

1

var simple = '<p> hello </p>';
$('.easy').append(simple);

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

If you want to create HTML template, you can also use backticks.

edited Nov 24 '17 at 19:59

answered Nov 24 '17 at 19:49

Lwin Htoo Ko

You don't need backticks for this, do you? – agrm Nov 24 '17 at 19:50
It is better way to create HTML in JavaScript. Why not? – Lwin Htoo Ko Nov 24 '17 at 19:52
1

The [jQuery documentation](http://api.jquery.com/append/#entry-examples) seems to promote quotes for this. I just don't see the benefit of using backticks unless you're using template literals. – agrm Nov 24 '17 at 19:56
Thank you for the point out. Answer is edited. – Lwin Htoo Ko Nov 24 '17 at 20:02

2 Answers2