javascript - 将文本区域中的 CSS 和 HTML 呈现到 div 元素中时出现问题

Question

我能够将在 textarea 中键入的 HTML 代码渲染到它旁边的 div 元素中，但我在尝试渲染的 CSS 方面遇到了一些问题。我的设置类似于 w3schools 的“尝试”部分，其中左侧有一个框用于编写代码，右侧有一个 div 用于呈现的 html，但是当我将 CSS 应用于“body”时，它适用它而不是整个网页而不是 div。

因此，如果将此代码键入文本区域:

body {
    background: linear-gradient(45deg, red, blue, green);
}

它会改变整个网站的背景，而不是网页呈现的 div 的背景。有什么办法可以解决这个问题，或者这会一直是个问题吗？这是我用于呈现文本区域代码的函数:

$(document).ready(function(){
            $("#showmeImg").click(function(){
                $("#outputContainer").html($(editor.getValue()));
            });
        });

单击“showmeImg”会将代码从“editor”渲染到“outputContainer”div。

Answer 1

问题是 body 是注册的 DOM 元素，所以它总是引用整个文档的 body 元素。

您可以尝试在您的 javascript 中用您要更改的元素选择器替换正文。例如

var html = $(editor.getValue());
$('#outputContainer').html(html.replace('body','#outputContainer'));

这不是一个非常优雅的解决方案，但它会很快完成您想要实现的目标。