I'm trying to create some dynamic html through jquery, filter it to the part I'm interested in, and append that section of html to an existing element on the page but its not working. What am I doing wrong in this fiddle?
HTML:
<div id="output">This is the output:<br></div>
jQ:
var response = "<html><body><h1>hello</h1></body></html>";
$(response).filter("body").appendTo("#output");
$(response)
.filter(function() {
return $("body");
})
.appendTo("#output");
You can do also
$('<div/>') // add response to fake div
.append(response)
.find('body') // find your target
.appendTo('#output'); // append the target
Ok, figured this out. jQuery vomits silently when it encounters the "html" and "body" tags in dynamically generated html. I simply had to replace or strip those tags out and now it works as expected.
var response = "<html><head><title>test</title><style>body{font-size:.9em;}</style></head><body bgcolor=\"white\"><h1>hello</h1></body></html>";
// we have to remove/replace certain tags or jquery will vomit with unexpected results
var modifiedResponse = response.replace("<html>", "").replace("</html>", "").replace("<body", "<div id='content'").replace("</body>", "</div>");
var wrappedSet = $(modifiedResponse);
wrappedSet.filter("div[id='content']").appendTo("#output");
console.log($(response)), you will see just[ <h1>hello</h1>], So you can use$(response).appendTo("#output");