Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element'

最新推荐文章于 2023-09-17 23:51:03 发布

原创最新推荐文章于 2023-09-17 23:51:03 发布 · 6.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#SyntaxError #innerHTML #xhtml #jquery.mobile #data-ajax

javascript 同时被 2 个专栏收录

56 篇文章

订阅专栏

jquery mobile

3 篇文章

订阅专栏

本文介绍了一个关于XHTML文档使用jQuery Mobile时出现的错误，并提供了详细的解决方案。问题出现在尝试修改XHTML文档的内容时，由于XHTML不支持innerHTML等方法导致。文章最后给出了修正方法，通过设置data-ajax属性为false解决了此问题。

环境：win7 64位,apache,chrome 44.0.2403.125

写了下面一个xhtml文件

<?xml version="1.0" encoding="UTF-8"?>
<html xml:lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:epub="http://www.idpf.org/2007/ops">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=768, height=1024"/>
		<script type="text/javascript" src="scripts/jquery.js"/>
		<script type="text/javascript" src="scripts/jquery.mobile.min.js"/>
		<link rel="stylesheet" type="text/css" href="./scripts/jquery.mobile.min.css"/>
	</head>
	<body data-width="768" data-height="1024">
		<a style="z-index:1;" href="chapter-001.xhtml">abcd</a>
	</body>
</html>

点击链接时报错：

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.

出错行是jquery.mobile-1.4.2.js的4911行

//workaround to allow scripts to execute when included in page divs
all.get( 0 ).innerHTML = html;

原因：

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

解决：

在a标签里添加

data-ajax="false"

即：

<a style="z-index:1;" href="chapter-001.xhtml" data-ajax="false">abcd</a>

参考：

http://stackoverflow.com/questions/27824609/uncaught-syntaxerror-failed-to-set-the-innerhtml-property-on-element-the-p

http://blog.youkuaiyun.com/coolcoffee168/article/details/24966689