Javascript/jquery：只更新div内部的内容（而不是外部）-包括带有实时预览的html和css_Javascript_Jquery_Html_Css

Javascript/jquery：只更新div内部的内容（而不是外部）-包括带有实时预览的html和css

javascript jquery html css

Javascript/jquery：只更新div内部的内容（而不是外部）-包括带有实时预览的html和css,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我不确定这是否可行，但基本上我正在对输入textarea的html和css进行实时预览，并将其显示在一个div（#previewStyle）中。我使用.keyup通过javascript/jquery来显示这一点 $(function(){ $(".updatepreview").keyup(function(){ $.post( "<?php echo http() . $websitedomain .'/.../.../styles.php'; ?>", $("#styles_

我不确定这是否可行，但基本上我正在对输入textarea的html和css进行实时预览，并将其显示在一个div（#previewStyle）中。我使用.keyup通过javascript/jquery来显示这一点

$(function(){ 
$(".updatepreview").keyup(function(){
$.post( "<?php echo http() . $websitedomain .'/.../.../styles.php'; ?>", $("#styles_form").serialize(), function(result_data){ $("#previewStyle").html(result_data); /*  use result data here */ }  );
});

$（函数（）{
$（“.updatepreview”）.keyup（函数（）{
$.post（“，$（“#样式_表单”）.serialize（），函数（结果_数据）{$（“#预览样式”）.html（结果_数据）；/*在此处使用结果数据*/}）；
});

问题是：当它加载css时，它会更新页面上的所有内容（甚至在div之外）。是否有任何方法可以使用jquery将此限制为仅div？如果有必要，我可以进入并更改div之外的所有id和类，以确保没有冲突；但是，我想首先检查这里的解决方案。一个文本区域包含css，一个包含html，它将它们序列化并通过followin加载它们g:

<?php echo "
<html>
<head>
<style> ".$_POST['style']."</style>
</head>
<body>".$_POST['html']."</body>
</html>"; 
?>

更新：

preview div确实显示正确；但是，preview div内部的css会更新并覆盖preview div外部的css。我正在尝试确定是否有办法将preview div内部的css限制为仅预览div，而不让它覆盖preview div周围页面的主样式表。

将内容放入<代码中>iframe，以便独立于主文档进行处理

有关将HTML和CSS加载到iframe中的详细信息，请参阅。

使用iframe将所有内容与主文档分开。例如，JSFIDLE就是这样做的。我会尝试一下。如果它工作正常/不正常，我会在这里发帖子。但是有没有其他方法可以使用div？只是好奇。我更喜欢使用div，如果可能的话，而不是我frame。您可以将所有CSS选择器更改为以

#divid

开头，因此效果仅限于该DIV。谢谢。我最终切换到了iframe；但是，现在面临调整iframe大小的问题。已将iframe的大小调整为更大，而不是更小。如果您对此有所了解，是否可以看到以下问题：