我来帮你拆解这两个现象的原因，以及给出按钮消失的解决办法：

一、两种情况的原因 #

1. 插入button中div仅短暂显示 #

你的按钮没有设置type="button"，在HTML里，按钮默认的type是submit。哪怕页面里没写<form>标签，浏览器也会把这个按钮当成表单提交按钮，点击后会触发页面刷新行为。你刚插入的div还没来得及停留，页面就重置了，所以看起来只显示一秒就消失了。

另外补充一点：虽然HTML规范允许button内部包含元素，但把块级div塞进按钮里的用法并不推荐，部分浏览器对这种嵌套的渲染可能有异常，但这里的核心问题还是页面刷新导致的内容重置。

2. 插入holder中按钮消失 #

你应该是把代码改成了$( 'div.holder' ).html( container );对吧？html()这个jQuery方法的作用是完全替换目标元素的所有内部内容。原来的按钮是放在div.holder里面的，执行这个代码后，holder里的内容直接被新创建的div覆盖了，原来的按钮自然就被移除了，所以你看不到它了。

二、解决按钮消失的方案 #

想要按钮和新div同时显示，并且避免页面刷新的问题，你可以这么做：

1. 给按钮添加type属性，阻止默认提交行为
   不管你把div插在哪里，都要给按钮加上type="button"，防止浏览器触发页面刷新：

   <div class="holder"> 
     <button id="0" class="box fa fa-paint-brush" type="button"></button> 
   </div>
   

2. 用append()/prepend()替换html()，保留原有内容
   不要用html()替换holder的内容，改用append()（把div加到holder末尾）或者prepend()（把div加到holder开头），这样原来的按钮会被保留：

   function openBox () { 
     $( '#0' ).click( function () { 
       var container = $( "<div>" ).css({ 
         height : "200px", 
         width : "200px", 
         position : "absolute", 
         "background-color" : "black", 
       }); 
       // 用append代替html，保留按钮
       $( 'div.holder' ).append( container ); 
     }); 
   }
   

3. 优化事件绑定，避免重复触发
   如果你多次调用openBox，会给按钮绑定多个点击事件，导致重复创建div。推荐改成页面加载完成后一次性绑定：

   $(document).ready(function() {
     $('#0').click(function() {
       var container = $("<div>").css({
         height: "200px",
         width: "200px",
         position: "absolute",
         "background-color": "black"
       });
       $('div.holder').append(container);
     });
   });
   

这样修改后，点击按钮既不会触发页面刷新，新创建的div会和按钮一起显示在holder里，按钮也不会消失啦。

内容的提问来源于stack exchange，提问作者Jim