尝试使用 JQuery insertBefore() 方法添加 HTML 代码，但 HTML 字符串在运行后变得混乱

Question

在这个循环中，我试图为每个"count"添加一个事件处理程序。事件处理程序调用函数"hideAll()"，其输入值为"count"。

我这样做是通过添加HTML代码下的ID "next"，使用JQuery的insertBefore()方法。

for (count=1; count<=3; count++)
{    
$('<a href="#" onclick="hideAll(' + count + ');return false;">' + count + '</a>').insertBefore("#next");
}

所以当我运行它的时候，它会被添加，但出于一些奇怪的原因，它会像这样被添加:

<a onclick="hideAll(1);return false;" href="#">1</a>

字符串href="#"被移到末尾。我不明白为什么。

我试着检查引号和所有的东西。一切似乎都很完美，不知道为什么会这样。

Answer 1

你用什么浏览器看?

有些浏览器在查看dom时，会在解释完标记后显示它的"最终"源。

确保"查看页面源"，而不是"检查元素"来获得纯预解释标记。

最终，属性的顺序是不相关的，所以它应该可以满足您的目的?

Answer 2

如果你看一下jQuery源代码，这就是当你传入字符串

时被调用的东西

if ( jQuery.isPlainObject( context ) ) {
    selector = [ document.createElement( ret[1] ) ];
    jQuery.fn.attr.call( selector, context, true );
} else {
        selector = [ doc.createElement( ret[1] ) ];
}

所以浏览器从document.createElement()输出的内容就是jQuery放到DOM上的内容

Answer 3

这对你真的很重要吗?

问题是代码

$('<a href="#" onclick="hideAll(' + count + ');return false;">' + count + '</a>').insertBefore("#next");

在#next标签之前不插入原始HTML。

命令

$('<a href="#" onclick="hideAll(' + count + ');return false;">' + count + '</a>');

在内存中创建DOM元素并将其封装到jQuery选择器中。然后将其插入到页面的DOM树中。而如何显示字符串则取决于浏览器。