使用 JavaScript 访问 DOM innerHTML 时出现问题

Question

我正在使用 Summernote 所见即所得编辑器为用户提供编辑 HTML 模板的功能，并将更改存储到个性化区域。为此，我需要 POST 一组文本字段以及编辑后的 HTML 到后端。

一切都按预期工作，除了 HTML 从可编辑 DIV 中得到 POSTed，而不是 POST 更新后的 DOM 即它是原始 HTML 模板，未经编辑。

如果我使用浏览器开发工具控制台，我可以使用 'document.documentElement.outerHTML' 查看正确更新的 DOM，但是当我设置一个变量以获取外部 HTML 元素时ID，我还是只有POST原来的标记。

脚本中的变量如下（基于其他 Whosebug 答案）：

var content = $('#template_text')[0].outerHTML;

如前所述，这允许我 POST DIV 的内容，但不会 POST 用户对模板所做的更新。

我试过使用 innerHTML, outerHTML, html()，但基本上得到了相同的结果。如果我在变量中使用 document.documentElement.outerHTML，这个 POST 是更新的值，但会发送整个文档，而不仅仅是 DIV（我只想要 DIV） .

如有任何帮助，我们将不胜感激。

Answer 1

我们可以像这样使用库的记录方式，而不是操纵 DOM，

var editedText = $('#summernote').summernote('code');

希望对您有所帮助！

Issues accessing DOM innerHTML with JavaScript