为什么javascript关闭页面标签

Why is javascript closing page tags?

本文关键字:标签 javascript 为什么      更新时间:2023-09-26

我有一个简单的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 {
 };

问题是,当我有一个"li"的html -所以<li id="pub22">它自动关闭"li",即使我没有添加到它的代码。我无法真正改变页面的布局,因为我无法访问它。是否有一种方法来保持li从关闭后插入html从javascript?

注意-这有点复杂。pub22 li是第一个,然后是嵌套的anal22和admin22,它们具有不同的名称。因为它们是嵌套的,所以我想让li打开。也许我把它弄得太复杂了

只要你用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

您需要做的是:

$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基本函数的一部分)。

jQuery的.html使用javascript的.innerHTML

.innerHTML将节点插入DOM。根据定义,节点必须是有效的标记。所以浏览器会自动纠正你的错误标记