jquery - Attaching <head> elements with Javascript works with .innerHTML, but not XML child nodes -
there easier ways this, i'm trying new.
the basic gist want have 1 js , 1 jquery attachment per head per page on static website. want able append elements body, head well. files are:
home.html
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="eco.js"></script> </head> eco.js
window.addeventlistener("load", function() { var ajax = new xmlhttprequest(); ajax.onload = postdata; ajax.open("get", address, true); ajax.send(); } ); function postdata() { var xml = jquery.parsexml(this.responsetext); $("head").append(xml.queryselector("head").childnodes); } and common.xml
<head> <link href='eco.css' type='text/css' rel='stylesheet' /> <link href='home.css' type='text/css' rel='stylesheet' /> </head> however, not work (common.xml requested , retrieved successfully). chrome dev tools show xml nodes appended well, head. yet page not reflect changes, notably css not incorporated. however, if change
var xml = jquery.parsexml(this.responsetext); $("head").append(xml.queryselector("head").childnodes); to
$("head").append(this.responsetext); (and fix common.xml remove unneeded tags) page reflects changes. explain what's going on here?
thanks!
jquery.parsexml() returns xmldocument object represents generic xml dom, not compatible html dom.
when append child nodes after parsing xml file xml, end inserting xml elements, not html elements. since html processor understands html link elements, not recognize them when come xml dom — become unknown elements, , not have intended meaning.
when append response markup directly, markup interpreted html because working directly html dom in page. allows link elements work intended, referencing external stylesheets use page.
the following example, non-head element, demonstrates how b element differs between html , xml using same methods in question. in html, represents text meant stand out paragraph, associated default styles. in plain xml, it's arbitrary element, no default styles. in firefox , ie, each b element responds namespaced css selectors correctly (note use xhtml namespace html elements), although ie doesn't insert xml element @ all, instead throwing wrongdocumenterror. included css doesn't work in chrome either — presumably because, ie, trying wrangle html , xml isn't smartest thing do.
$(function() { var html = '<b>html b element</b>'; var xml = '<root><b>xml b element</b></root>'; $('p.html').append(html); var xmldoc = jquery.parsexml(xml); $('p.xml').append(xmldoc.queryselector(':root').childnodes); });@namespace 'http://www.w3.org/1999/xhtml'; b::before { content: 'default namespace '; } |b::before { content: 'non-namespaced '; } /* or no namespace */ *|b { color: blue; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <p class="html"></p> <p class="xml"></p>what's interesting if use xml.queryselector("head").innerhtml rather xml.queryselector("head").childnodes, seems work, despite fact element object not htmlelement (i.e. xml.queryselector("head") instanceof htmlelement returns false). according this new answer louis, in latest versions of firefox , chrome innerhtml represents xml serialization of contents of xml element node, explains behavior. however, particular quirk of innerhtml should not relied on not cross-browser compatible.
ultimately, best option not parse document xml in first place; treat regular html fragment appending responsetext directly, jquery able handle html fragments.
Comments
Post a Comment