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提供了正确的格式，但是append不会使它出现在HTML中。

任何想法如何将chatWindow var插入HTML？

谢谢

Answer 1

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

然后它按预期工作。

尽管如此，在打开“查看”页面源代码后，无法在HTML中找到它。

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

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

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

1 个答案: