如何将 jQuery HTML 字符串插入 HTML 文档

Question

我在将 jQuery HTML 字符串插入 HTML 文档时遇到问题，更具体地说是插入到我的 html 正文的页脚中。

问题是当我附加经过$.parseHTML 的 jQuery 字符串时，它出现在我的屏幕上，我可以检查它。但是，打开查看页面源代码后，在 HTML 中却找不到。

let chatWindow = '<section class="module"><header class="top-bar">' + userName + '</header>';
            chatWindow += '<ol class="discussion">';

            for (let i = data[0].length - 2; i >= 0; i -= 3) {
                if (data[0][i - 1] == data[1]) {
                    chatWindow += '<li class="self"><div class="avatar"></div><div class="messages">';
                } else {
                    chatWindow += '<li class="other"><div class="avatar">';
                    chatWindow += '<img src="' + data[2] + '"/></div><div class="messages">';
                }
                chatWindow += '<p>' + data[0][i] + '</p>';
            }
            chatWindow += '<time datetime="2009-11-13T20:00"></time></div></li></ol>';
            chatWindow += '<textarea class="discussion-chat"></textarea></section>';

            chatOutput = $.parseHTML(chatWindow);
            console.log(chatOutput);

            $('.module').css('display', 'block');
            $('footer').append(chatOutput);

为了澄清我笨拙的代码，它只是一个通过$.getJSON() 函数生成的弹出聊天窗口。

当我使用$.parseHTML 时，它似乎为我提供了正确的 DOM 格式，但追加不会使其出现在 HTML 中。

任何想法如何将chatWindow var 插入到我的 HTML 中？

谢谢

Answer 1

它出现在我的屏幕上，我可以检查它

然后它按预期工作。

然而，打开查看页面源代码后，我在 HTML 中找不到它。

因为页面源是服务器返回的页面的原始源代码。在客户端对 DOM 的修改不会改变该历史记录。

听起来您的代码按设计运行，您只是不清楚“查看页面源代码”的作用。它不会显示 JavaScript 修改后 DOM 的当前状态，它会显示从服务器返回的内容。检查 DOM 会显示当前状态，从您的描述来看，当前状态听起来是正确的。