有没有更好的方法在javascript/jquery中呈现div框？我遵循这个方法，但是我犯了很多错误

尝试：

函数render\u my\u div（）{
var div_内容=`
试验室

`;
$（“#呈现”）.html（div#u内容）；
}
$（'body'）。在（'click'，'close'，function（）上{
$（“.firstDiv”）.remove（）；
$（“#div_脚本”）.remove（）；
}

以及HTML：

<button id="myBtn">Button</button>
<div id="render"></div>
<script type="text/javascript">const background,color,text;</script>

按钮
常量背景、颜色、文本；
$（“.firstDiv”）.resizeable（）.draggable（）；

这似乎在@Mahmoud Mostafa运行得很好。但是我使用jquery UI，这样我就可以实现拖动和调整大小了 这似乎根本不起作用：（

PS：很抱歉，如果我没有正确编辑/更新我的问题，因为我是stackoverflow的新手

请尝试：

function render_my_div(){
    var div_content = `<div class="firstDiv"><div id="close"></div><div class="secondDiv">
    <p>Test Div</p></div></div>
    `;
    $("#render").html(div_content);
}
$('body').on('click', '.close', function(){
    $(".firstDiv").remove();
    $("#div_script").remove();
}

函数render\u my\u div（）{
var div_内容=`
试验室

`;
$（“#呈现”）.html（div#u内容）；
}
$（'body'）。在（'click'，'close'，function（）上{
$（“.firstDiv”）.remove（）；
$（“#div_脚本”）.remove（）；
}

以及HTML：

<button id="myBtn">Button</button>
<div id="render"></div>
<script type="text/javascript">const background,color,text;</script>

按钮
常量背景、颜色、文本；

我解决了这个问题

$（“#myBtn”）。单击（函数（）{
render_my_div（）；
$（'head'）.append（'$（“.firstDiv”）.resizeable（）.draggable（）；'）；
});

将javascript div内容移到外部并仅呈现div添加元素时包含该

片段有什么意义？这就是问题的原因。在这种情况下，您似乎没有使用javascript进行任何有用的操作。您不能简单地呈现具有display:none的div中的所有内容，然后设置display吗：单击按钮时阻止？如何使用

常量背景、颜色、文本；

？请更新您的问题。@zeus您的代码有问题，如果多次使用

myBtn

，将创建无效的html。（id在页面上应是唯一的）。这在Safari Mac上不起作用。此代码的问题与OP包含的代码完全相同。