如何在按钮单击时刷新 div 内容

Question

我在 div 中有一个脚本，当有人单击具有唯一 ID 的按钮时，我想刷新该脚本。

我有一些数据将显示在 div 内 - 我需要刷新而不刷新整个页面。

我找到了一个改变边框颜色的解决方案，但我不能将它简化为我需要的。 这是我到目前为止所拥有的

 var storeColor = 'red'; $('#container').on('click', 'button', function() { var $p = $('#content p'); var tmp = $p.css('border-color'); $p.css('border-color', storeColor); storeColor = tmp; });

 </div> <button type="button">Refresh DIV</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="container"> Contents of div </div>

Answer 1

我认为您的代码存在一些问题...该按钮位于容器之外，这就是单击侦听器不起作用的原因。 在单击 function 内，您尝试访问某个元素内的段落p ，其中的 id content在您的代码中不存在

 var storeColor = 'red'; $('#btnRefresh').on('click', function() { var $p = $('#container'); $p.css('background-color', 'red'); $p.html('hello world'); });

 <button type="button" id="btnRefresh">Refresh DIV</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="container"> Contents of div </div>

Answer 2

为什么不尝试使用 document.querySelector('.div').innerHTML = html string动态更改 div 的整个内部内容

如果在单击按钮时使用上述内容，则不会刷新页面。 您可能还想在按钮的事件侦听器中使用 preventDefault。