javascript - 禁止移动 html 元素

Question

请查看此页面。
Check Out
如您所见，我尝试添加实时预览。我使用 jQuery html() 向网页添加元素。但当任何人点击生成按钮时，元素会向上移动一点以添加新元素“实时预览”。有什么方法可以消除这种移动吗？
抱歉英语不好(;

    <input id="url" type="text" value="http://"/><br/>
    <button id="btn">Generate</button><br/>  
<div id="opt">
&nbps;
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"         type="text/javascript" ></script>
    <script type="text/javascript">
        $("#btn").click(function ()
 {
$("#opt").html ("Live Preview");
});
</script>

是这样的。还有为什么实时预览文本在上面的元素中有很大的填充。

Answer 1

您已经使用了 用于 <div class="error"> 中的填充

它被jquery命令删除$(".error").text("");按下按钮时。要么删除  在原始代码中(空格将永远存在)，或者更改 jquery 命令以在按下按钮后添加它(空格将永远存在)。