So if I have a variable like
var ht = "<body><p>Paragraph Here</p></body>"
If it was attached to the DOM I could just do this to get the text
$('p').text();
But can I do the same kind of selection just on a variable that has not yet been attached to the dom?
The jQuery object will take HTML and make it in to a DOM structure for further query, you can pass it in directly to create the object, or use it as a context if you just wish to query it.
Edit: For some reason it seems necessary to wrap it in a DIV, if not already within one in this example. See the jQuery object documentation on this method for further information.
See test framework for system at: http://jsfiddle.net/hUMqU/
var ht = "<body><p>Paragraph Here</p></body>";
$('<div>' + ht + '</div>').find('p').text();
or as context:
var ht = "<body><p>Paragraph Here</p></body>";
$('p', '<div>' + ht + '</div>').text();
<body> tag may cause issues. I've tested it in Chrome and Firefox.
'<div>', not '<div'>.There is no mystery. Selecting
$('p')
selects p elements of the document, the implied context.
But the p elements in:
var ht = "<body><p>Paragraph Here</p></body>";
are not attached to the document (DOM) so it's OK if they are not selected.
Fortunately the $() function has a second argument, the context, that has to be used here, like:
$('p', $(ht).context)
Just wrap your HTML String into a jQuery object, and then you can run your jQuery selectors from there:
var htmlString = "<body><p>Paragraph Here</p></body>";
var elements = $(htmlString);
var p = elements.filter('p').text();
console.log(p);
//=> Paragraph Here