为什么javascript关闭页面标签？

Question

我有一个简单的js，可根据供应商变量输出html

if (icAnalytics == "1"){//Analytics
    $("#anal22").html("<a class='test1 test2 test33' href=/dashboard/site_sum.asp?id=application>Analytics</a>");
        };

if (icPermissions >= "1"){//Publishers
            $("#pub22").html("<a tabindex='0' href=/admin/default.asp class='ubermenu-target ubermenu-target-with-icon ubermenu-item-layout-default ubermenu-item-layout-icon_left'><i class='ubermenu-icon fa fa-lock'></i><span class='ubermenu-target-title ubermenu-target-text'>Pub</span></a>");
            }

if (icPermissions == "2"){//Admins
        $("#admin22").html("<a class=aTop2 href=/system/default.asp>Admin</a>");
        }

else {
 };

问题是当我将html转换为“ li”时-即使我没有将代码添加到其中，它<li id="pub22">自动关闭“ li”。 我无法真正更改页面的布局，因为我无权访问它。 有没有一种方法可以防止在从javascript插入html后关闭li？

注意-这有点复杂。 首先是pub22 li，然后将anal22和admin22嵌套并具有不同的权限。 由于它们是嵌套的，所以我想让li打开。 也许我把这个变得太难了。

Answer 1

使用JavaScript将任何HTML添加到DOM后，Web浏览器将尝试解析该HTML。 如果创建一个<li>元素而不关闭它，浏览器将类似于“哇，那不是有效的HTML；我会解决它”，它将自动关闭该标记。

但是，所有的希望并没有失去！ 与其在编写时将代码添加到DOM中，不如将其全部存储在一个字符串中，并且仅在完成后才将字符串添加到DOM中。

这是一个例子：

var myHtml = "<li>"
myHtml += "blah blah this is some content";
myHtml += "</li>";
$("#someElement").html(myHtml); //we add the html to the DOM only now that we're done writing it

Answer 2

您需要执行以下操作：

$element = $('<li id="pub22">...</li>');
$element.append('<a id="anal22" href="...">...</a>');
$element.append('<a id="admin22" href="...">...</a>');
$element.appendTo('#someContainerElement');

在这里，您可以创建<li> ，在其中添加一些<a>元素，然后最终将<li>附加到DOM中的某些现有元素。 以这种方式创建元素并在准备好将其激活时将它们附加到DOM是jQuery的主要功能之一（实际上，这是基本jQuery函数的一部分）。

Answer 3

jQuery的.html使用JavasScript的.innerHTML

.innerHTML将节点插入DOM。 根据定义，节点必须是有效的标记。 因此，浏览器正在即时纠正您的错误标记。