jQuery selector editing HTML before adding to the DOM

Question

I am trying to add some content to the DOM using a jQuery selector but I want to manipulate it before it gets added.

var $content = $('<h1>title</h1><h2 id="xx">remove me</h2><p>some content or other</p>');

$content.remove('#xx');

$('#output').append($content);

I have put this on jsfiddle here http://jsfiddle.net/NNcG5/1/

Many thanks, Mike

Answer 1

I'd recommend $content.not('#xx').appendTo('#output');

I also updated your JS Fiddle with the solution too, here.

Answer 2

Try like this:

var $content = $('<div/>').html($('<h1>title</h1><h2 id="xx">remove me</h2><p>some content or other</p>'));
$content.find('#xx').remove();
$('#output').append($content);

Live demo.