Javascript 如何在jQuery中预览Html

我不熟悉jQuery。我想在点击锚定标签后预览html。我有一个大的

textarea

，用户将在其中添加

html

和

css

像这样：

<textarea type="text" rows='20' id="FetchHTML" name="html" style="font-family: Arial;font-size: 12pt;"></textarea>

<center><a class="btn btn-danger" id="PreviewHTML" href="javascript:;">Preview</a></center>

这是我的情态：

<!-- Preview Html Template -->
<div class="modal fade" id="PreviewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Preview HTML</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body" id="AppendPreview">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

预览HTML
&时代；
接近

现在，我的jQuery代码：

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','#PreviewHTML',function(){
         var html = $('#FetchHTML').val();
         alert(html);
         $('#AppendPreview').append(html);
         $('#PreviewModal').modal('show');
    })
})
</script>

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'预览WHTML'，函数（）上{
var html=$（'#FetchHTML'）.val（）；
警报（html）；
$（'#AppendPreview'）.append（html）；
$（'预览模式'）.modal（'显示'）；
})
})

现在用户在

textarea

中输入

html

，底部预览有一个按钮。 我在

textarea

中输入了以下

html

：-

现在，当我点击预览按钮时，它会显示在下面的输出

在预览1中，不选择

css

。有人能帮我解决这个问题吗

$（'#AppendPreview'）.append（html）

到

$（'#AppendPreview'）.html（html）

似乎可以解决您的问题。运行下面的代码段


$（文档）.ready（函数（）{
$（文档）。在（'单击'，'预览WHTML'，函数（）上{
var html=$（'#FetchHTML'）.val（）；
$（'#AppendPreview'）.html（html）；
$（'预览模式'）.modal（'显示'）；
})
})

预览HTML
&时代；
接近
正在更改

$（'#AppendPreview'）.append（html）

到

$（'#AppendPreview'）.html（html）

似乎可以解决您的问题。运行下面的代码段


$（文档）.ready（函数（）{
$（文档）。在（'单击'，'预览WHTML'，函数（）上{
var html=$（'#FetchHTML'）.val（）；
$（'#AppendPreview'）.html（html）；
$（'预览模式'）.modal（'显示'）；
})
})

预览HTML
&时代；
接近
请详细解释“不选择css”的含义。同时提供一个可运行的示例，请更详细地解释“不选择css”的含义。还提供一个可运行的