为什么我的（不正确的）DOM结构在JQuery DOM操作后自动更正？ [英] Why is my (incorrect) DOM structure auto-corrected after JQuery DOM manipulation?
问题描述
我一直在网上搜索几个小时，但我找不到解释或解决方案。所以让我们看看有没有人可以在这里提供一个...
我遇到的问题是我有一些无效的旧HTML，我们正在改造通过JQuery注入一些其他div的等等。但是，在改变DOM之后，一些功能不再起作用了。
让我举个例子。旧的HTML是这样的：
< table>
< form method =POST>
< tr>
< td>< input type =textvalue =test/>< / td>
< / tr>
< tr>
< td>< input type =submitvalue =SEND！ />< / TD>
< / tr>
< / form>
< / table>
如你所见，有一个< form> 嵌套在< tr> 之外，实际上无效。但它是由浏览器正确解释它的工作。如果我通过JQuery操纵浏览器（在我的情况下是Firefox），通知它是错误的，并且该按钮不再工作，那么但是。检查我的Firebug会给出如下的东西：
< table>
< form method =POST>< / form>
< tr>
< td> ...
显然， submit 按钮不再工作，因为它已经自动关闭了< form> 标签和提交不再被嵌入。
任何人都可以在这个问题上发光吗？为什么会发生这种情况，我可以做些什么来防止这种情况发生（除了更改原始HTML）。
非常感谢！
编辑：
为避免得到无效标记的答案，让我向您展示第二个例子。
< input type =textid =somethingvalue =/>
正在加载onLoad的Javascript功能：
function setRequired（）{
document.getElementById（'something'）。setAttribute（'aria-required'，'true'）;
}
在加载后，我可以在Firebug中检查它，它的工作原理如下： / p>
< input type =textid =somethingvalue =aria-required =true/>
但是，如果我添加DOM操作，最终会出现：
< inputaria-required =truetype =textvalue =id =something>< / inputaria-required =真>
EDIT2：
关于DOM修改，我只是将页面的整个文本包含在
< div> 标签的结构中。所以这样的东西（简化）： $（'body'）wrapInner（'< div class =container> ;'）;
要查看此问题，请执行此页面（确保您可以在Firefox中查看，因为它可以在IE中使用）。
您稍后添加的代码相当麻烦。我会说这需要非常精确的时间才能正常工作：
//绑定页面加载事件处理程序
$（document）.ready（function（）{
LoadStyle（）;
}）;
//页面加载后1/2秒处理原始HTML页面
函数LoadStyle（）{
setTimeout（function（）{
var outerbody =< ; div>;
var outerbodyEnd =< \ / div>;
var frameHtml = $（'body'）。html（）;
var frameHtml = $（'身体'）。html（）;
document.body.innerHTML = outerbody + frameHtml + outerbodyEnd;
}，500）;
}
//覆盖以前的onload处理程序
window.onload = setRequired;
//在页面加载之后，使用DOM方法操作页面
函数setRequired（）{
var field;
field = document.getElementsByName（'required_one'）[0];
setAttrNS（field，aria-required，true）;
}
无论如何增加 setTimeout（） / code>延迟到5000毫秒，你会看到无效节点由 LoadStyle（）生成。经过进一步调查，我已经编写了这个较短的代码片段，仍然展示了这个问题（不涉及jQuery）：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN>
< html>
< head>
< title>测试包装内容< / title>
< script type =text / javascriptlanguage =javascript>
window.onload = function（）{
var field = document.getElementsByName（'required_one'）[0];
field.setAttributeNS（http://www.w3.org/2005/07/aaa，aria-required，true）;
alert（document.getElementsByTagName（body）[0] .innerHTML）;
};
< / script>
< / head>
< body>
< input type =textname =required_onevalue =这应该显示>
< / body>
< / html>
无效的HTML由 .innerHTML 。 Firebug的HTML面板和alert（）都不显示命名空间属性。可悲的是，我不熟悉命名空间，所以我不能告诉你有什么问题：你的代码，Firebug或Firefox。
I have been searching the web for hours for this but I couldn't find an explanation or solution. So let's see if anyone can provide me with one here...
The problem I am having is that I have some "invalid" old HTML and we are currently revamping the website by injecting some other div's etc through JQuery. But after having changed the DOM some functionalities are not working anymore.
Let me give you an example. The old HTML is something like:
<table>
<form method="POST">
<tr>
<td><input type="text" value="test" /></td>
</tr>
<tr>
<td><input type="submit" value="SEND!" /></td>
</tr>
</form>
</table>
As you can see there is a <form> nested outside of a <tr> which is actually not valid. But it is interpreted correctly by the browser and it's working. BUT if I manipulate the DOM through JQuery the browser (Firefox in my case) notices it's wrong and the button is not working anymore. Checking my Firebug would give something like:
<table>
<form method="POST"></form>
<tr>
<td>...
So obviously the submit button is not working anymore since it has "automatically" closed the <form> tag and the submit is not embedded anymore.
Can anyone shine some light on this issue? Why is this happening and what can I do to prevent this from happening (apart from changing the original HTML).
Thanks a lot !!
EDIT:
To avoid getting just the answer of "invalid markup" let me show you a second example.
<input type="text" id="something" value="" />
Javascript function that is loading on onLoad:
function setRequired() {
document.getElementById('something').setAttribute('aria-required', 'true');
}
After the onload I can check this in Firebug and it works as expected:
<input type="text" id="something" value="" aria-required="true" />
But if I add the DOM manipulation after that it ends up in:
<inputaria-required="true" type="text" value="" id="something"></inputaria-required="true">
EDIT2:
As for the DOM modification, I am just wrapping the entire body of the page inside a structure of <div> tags. So something like (simplified):
$('body').wrapInner('<div class="container">');
To see this issue in action check this page (make sure you view it in Firefox because it works in IE).
The code you've added later is quite a mess. I'd say it requires a very precise timing to work properly:
// Bind a page load event handler
$(document).ready(function() {
LoadStyle();
});
// Manipulate page with raw HTML 1/2 seconds after page load
function LoadStyle() {
setTimeout(function () {
var outerbody = "<div>";
var outerbodyEnd = "<\/div>";
var frameHtml = $('body').html();
var frameHtml = $('body').html();
document.body.innerHTML = outerbody + frameHtml + outerbodyEnd;
}, 500);
}
// Override previous onload handlers
window.onload = setRequired;
// Manipulate page with DOM methods right after page load
function setRequired() {
var field;
field = document.getElementsByName('required_one')[0];
setAttrNS(field, "aria-required", "true");
}
Whatever, if you increment the setTimeout() delay to 5000 milliseconds, you'll see the invalid node is generated by LoadStyle(). Upon further investigation, I've composed this shorter snippet that still exhibits the issue (no jQuery involved):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test wrapping the content</title>
<script type="text/javascript" language="javascript">
window.onload = function(){
var field = document.getElementsByName('required_one')[0];
field.setAttributeNS("http://www.w3.org/2005/07/aaa", "aria-required", true);
alert(document.getElementsByTagName("body")[0].innerHTML);
};
</script>
</head>
<body>
<input type="text" name="required_one" value="This should show">
</body>
</html>
The invalid HTML is generated by .innerHTML. Neither Firebug's HTML panel nor the alert() display a namespaced attribute. Sadly, I'm not familiar with namespaces so I can't tell you what's wrong: your code, Firebug or Firefox.
这篇关于为什么我的（不正确的）DOM结构在JQuery DOM操作后自动更正？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
