Question

I’m trying to insert HTML strings before and after an HTML string before writing the finished string to the DOM. Here’s what I have so far:

var Hello = '<p id="1234">Hello</p>'; 
var $Hello = $(Hello);
var $HelloGoodbye = $Hello.after('<p>Goodbye</p>');
$('#content').append($HelloGoodbye);

The result is that my #content div only gets the Hello fragment appended.

Thanks in advance!

Answer 1

The problem is because $Hello is a reference to the <p> element. You are putting the ‘Goodbye’ <p> outside of the first, so the $Hello variable remains unaffected. You need some method of grouping the two together if you want to have them in a single variable. Try this:

var $hello = $('<div></div>');
$hello.append('<p id="1234">Hello</p>');
$hello.append('<p>Goodbye</p>');
$('#content').append($hello);

Example fiddle