document.body.innerHTML 问题答案

【问题标题】：document.body.innerHTML issuedocument.body.innerHTML 问题
【发布时间】：2017-03-04 07:09:56
【问题描述】：

我在一个网站上有一个电子邮件转换器，它是由另一个开发人员编写的，它获取一个人的用户名并将其格式化为电子邮件地址。如果您在页面 [[username]] 上键入，它将在网页上生成一个可点击的电子邮件地址：username@gmail.com

现在我正在尝试将 PayPal 的跳转到可访问性导航合并到网站。添加 Pay Pal 的代码后，当我按 Tab 时，左上角会出现“跳至”链接，但该链接不起作用。这意味着下拉菜单不会出现。 https://github.com/paypal/skipto

在我的 javascript 电子邮件转换器中有一个代码行

document.body.innerHTML = emailConvert(document.body.innerHTML);

这似乎是问题所在，因为 Paypal 代码也在其代码中使用了 innerHTML。我正在为这行特定代码或所有代码寻找解决方案

document.body.innerHTML = emailConvert(document.body.innerHTML);

我尝试了各种解决方案，但都没有结果。任何帮助都会很棒。代码如下：

 $(document).ready(function () {
   (function () { 
     var domains = { 'n': 'gmail.com', 'p': 'yahoo.com', 's': 'comcast.net',    'k': 'att.net', 'b': 'aol.com', 'i': 'sbcglobal.net' };
    function renderEmail(str, user, domain, text) {
        var email = (user.match(/@/)) ? user : user + "@" + (domain || domains["n"]);
        if (domains[user.toLowerCase()]) { email = domain + "@" + domains[user.toLowerCase()]; }
        return " <a href='mailto:" + email + "?Subject=" + document.title + "\"'>" + (text || email) + "</a>";
    }
    function emailConvert(source) { return source.replace(/\[\[\s*([^\  [\,\|]*)\|?\s*([a-zA-Z0-9_\.-]+)?\s*()\]\]/g, renderEmail).replace(/\[\[\s*([^\[\,\|]*)\|?\s*([a-zA-Z0-9_\.-]+)?\s*\,{1}\s*([^\]]*)\s*\]\]/g, renderEmail); }
    document.body.innerHTML = emailConvert(document.body.innerHTML);
    $.fn.emailConverter = function () { this.innerHTML = emailConvert($(this).html(emailConvert($(this).html()))); }
})();

});

【问题讨论】：

没关系，我看到你刚刚编辑了它。 -- 您可以在编辑器中选择您的代码，然后单击工具栏中的代码图标（括号图标：{}），这样更易于阅读。

标签： javascript jquery html paypal innerhtml

【解决方案1】：

innerHTML 为您提供元素内 HTML 的字符串表示形式。它不会捕获以编程方式附加到这些元素的事件处理程序，因为它们没有在 HTML 中表示。

不要覆盖document.body 的innerHTML。这就像告诉你的秘书写下一些东西，然后她/他拿起你桌子上的所有东西，把它扔到窗外，然后直接在你的桌面上潦草地写下想要的笔记。即使秘书在桌子上画了一张非常准确的手机图片，当它不起作用时，你也不应该感到惊讶。

好吧，这不是一个完美的比喻，但希望你明白我的意思。

相反，您应该找到要修改的特定 HTML 元素，和/或在所需位置插入新的 HTML 元素。

您可以通过多种不同的方法来获取页面上的现有元素，例如document.getElementById、document.querySelector、document.querySelectorAll 和document.getElementsByTagName。如果你想痴迷地检查页面上的所有元素，你也可以深入到document.body的子节点。

同样，一旦您选择了 HTML 元素，也有多种方法可以将 HTML 插入到 HTML 元素中，包括 appendChild 和 insertAdjacentHTML。您仍然可以操作特定元素的 innerHTML，但您应该小心覆盖它可能包含的任何子节点，特别是如果这些子节点可能具有事件侦听器。

【讨论】：