问题
I'm trying to put a datetimepicker in my Rails 4 app. I decided to try this one: https://github.com/Eonasdan/bootstrap-datetimepicker.
The instructions are relatively straightforward, but when I load the page, I get the following JS error message:
Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document.
If I pause on the line where this is happening in JQuery.extend.buildfragment:
tmp.innerHTML = wrap[1] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[2];
I see that it's trying to set innerHTML to this:
<div class="bootstrap-datetimepicker-widget dropdown-menu"><div class="datepicker"><div class="datepicker-days"><table class="table-condensed"><thead><tr><th class="prev">‹</th><th colspan="5" class="picker-switch"></th><th class="next">›</th></tr></thead><tbody></tbody></table></div><div class="datepicker-months"><table class="table-condensed"><thead><tr><th class="prev">‹</th><th colspan="5" class="picker-switch"></th><th class="next">›</th></tr></thead><tbody><tr><td colspan="7"></td></tr></tbody></table></div><div class="datepicker-years"><table class="table-condensed"><thead><tr><th class="prev">‹</th><th colspan="5" class="picker-switch"></th><th class="next">›</th></tr></thead><tbody><tr><td colspan="7"></td></tr></tbody></table></div></div></div>
Most XML validators complain about the ‹ value being invalid. However, I don't have control over how this string is constructed since this is internal in jquery. I know that the datetimepicker works for most people without any issues, so this seems to be something wrong in my environment.
回答1:
XHTML does not support document.write or .innerHTML. Due to the fact, that jQuery inserts the new code using one of these methods, all XHTML compatible browsers will error out.
XHTML with application/xhtml+xml does not support raw modification of the source using any of these jQuery methods: .append(), .html(), .insert...(), etc.
Instead, query for some JSON data and insert the AJAX-received values into either pre-defined tags using .text() / .val() or dynamically create those nodes using document.createElement('someTag').
https://www.w3.org/MarkUp/2004/xhtml-faq#docwrite
回答2:
The problem was that the page was being served up as XHTML+XML, rather than HTML (credit to @Pointy for pointing this out).
I found that in my application_controller.rb, there was a line as follows:
before_filter{ response.content_type = 'application/xhtml+xml' }
I don't actually know why this line was present, but removing this line solved the issue and has allowd me to move forward.
来源：https://stackoverflow.com/questions/27824609/uncaught-syntaxerror-failed-to-set-the-innerhtml-property-on-element-the-p