问题：
未捕获的DOMException：无法使用JQuery设置“inner html”属性
陈扬
我已经搜索了‘类似的问题’的建议，但找不到一个匹配。
使用标准JS可以很好地工作代码。问题是在我使用jQuery重构代码时才出现的。我现在收到这个DOMException错误。堆栈跟踪指向responseHandler函数中的htmlTableStructure变量，错误提示标记是无效的XML，但我找不到任何明显的错误。
代码附在下面。有人能帮忙吗？
堆栈跟踪
Uncaught DOMException: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document.
at buildFragment (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery-3.5.1.js:5032:19)
at Function.jQuery.parseHTML (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery-3.5.1.js:10337:11)
at new jQuery.fn.init (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery-3.5.1.js:3167:33)
at jQuery (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery-3.5.1.js:157:10)
at responseHandler (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery_utils.js:23:30)
at Object.success (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery_utils.js:12:13)
at fire (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery-3.5.1.js:3496:31)
at Object.fireWith [as resolveWith] (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery-3.5.1.js:3626:7)
at done (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery-3.5.1.js:9786:14)
at XMLHttpRequest.<anonymous> (http://localhost:8080/Section5_AjaxJS_war_exploded/resources/js/jquery-3.5.1.js:10047:9)
WebForm
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Film Search</title>
<script
src="resources/js/jquery_utils.js"
type="text/javascript"></script>
<script src="resources/js/jquery-3.5.1.js"
type="text/javascript"></script>
</head>
<body>
<table border="1" bgcolor="#20b2aa">
<tr><th><big></big>Film Search Application</th></tr>
</table>
<p/>
<fieldset>
<legend>Retrieve Data from GetAllFilms</legend>
<form action="#">
<input type="button" value="XML" onclick="getAllFilms('GetAllFilms', 'xml')"/>
<input type="button" value="JSON" onclick="getAllFilms('GetAllFilms', 'json')"/>
<input type="button" value="TEXT" onclick="getAllFilms('GetAllFilms', 'text')"/>
</form>
<p/>
<div id="getallfilms"></div>
</fieldset><br></br>
</body>
</html>
Javascript Onclick函数
function getAllFilms(servletAddress, dataFormat) {
$.ajax({
url: servletAddress,
type: "POST",
dataType : dataFormat,
data : {format : dataFormat},
success: function(servletResponse) {
responseHandler(servletResponse, dataFormat);
}
});
}
Javascript响应处理程序函数
function responseHandler(servletResponse, dataFormat) {
// create base table structure object, with headings
let htmlTableStructure = $(
"<table border='1' class='ajaxTable'>" +
"<tr>" +
"<th>Film Id</th>" +
"<th>Name</th>" +
"<th>Year</th>" +
"<th>Director</th>" +
"<th>Cast</th>" +
"<th>Plot</th>" +
"</tr>"
);
// if data format passed in is json
if (dataFormat === "json") {
// append rows to html table structure
$.each(servletResponse.films, function(i, filmObject) {
htmlTableStructure.append("<tr>");
$.each(filmObject, function(key, value){
htmlTableStructure.append("<td>" + value + "</td>")
})
htmlTableStructure.append("</tr>");
});
// if data format passed in is xml
} else if (dataFormat === "xml") {
// append rows to html table structure
// loop through each film node in xml & get child node values
$(servletResponse).find('film').each(function () {
htmlTableStructure.append("" +
"<tr>" +
"<td>" + $(this).find('id').text() + "</td>" +
"<td>" + $(this).find('title').text() + "</td>" +
"<td>" + $(this).find('year').text() + "</td>" +
"<td>" + $(this).find('director').text() + "</td>" +
"<td>" + $(this).find('stars').text() + "</td>" +
"<td>" + $(this).find('review').text() + "</td>" +
"</tr>"
);
});
// if data format passed in is text
} else {
// append rows to html table structure
// split servlet response into rows using $ delimiter (rows 3 & 10)
// ignore first row (this is the header, which we've already hardcoded)
let rowString = servletResponse.split("$").slice(1);
// then for each remaining row, split into fields by # delimiter and wrap row in <tr>
$.each(rowString, function (i, stringLine) {
htmlTableStructure.append(
"<tr>" +
"<td>" + stringLine.split('#') + "</td>" +
"</tr>"
);
})
} $("#getallfilms").append(htmlTableStructure + "</table>");
}
共有1个答案
龙飞文
您试图将内容追加到无效标记。您首先创建一个
.append(...)
这种东西.append(htmlTableStructure+“
”）；是不正确的。
您需要继续重构代码以使其兼容。回顾一下jQuery的append方法是如何工作的可能是个好主意：https://api.jquery.com/append/
例如：
htmlTableStructure = $("<table></table>");
htmlTableStructure.append("<tr><th>...</th>...</tr>");
htmlTableStructure.append("<tr><td>...</td>...</tr>");
类似资料：
-
我有一个简单的html页面，在body标记中没有代码。我想通过JavaScript在body标记中插入html。 我的javascript文件如下所示。 现在我想要这个很长的html代码在页面加载时自动插入到body标记中。但它给了我我在标题中提到的错误。为什么？ 而且这也是创建基于ajax的网站的正确方法吗（不重新加载页面），这意味着如果我调用服务器端脚本来更新这个很长的html代码并将其附加到
-
我正在创建一个HTML页面，它是使用bootstrap构建的。下面是hello.js文件的最终HTML代码和代码： null null 当我使用submit（提交）按钮而不是alert（报警）单击按钮时，我得到的是错误 未捕获的TypeError：无法设置null的属性“onClick” 有谁能告诉我为什么我要面对这个错误吗？？帮助解决它。
-
问题内容： 为什么会出现错误或未捕获的TypeError：无法将属性’innerHTML’设置为null？我以为我了解innerHTML并在以前使用过。 问题答案： 您必须将div放在脚本之前，以便在加载脚本时该div存在。
-
我在Drupal网站上遇到以下错误：
-
问题内容： 如果这个问题已经回答，我深表歉意。我尝试搜索解决方案，但找不到适合我的代码的任何解决方案。我还是jQuery新手。 对于两个不同的页面，我有两种不同类型的粘滞菜单。这是两者的代码。 我的问题是，底部粘性菜单的代码不起作用，因为第二行代码会引发错误，提示“未捕获的TypeError：无法读取未定义的属性’top’”。实际上，除非将第二行以下的其他jQuery代码放在第二行之上，否则根本不