JavaScript AppendChild 在重置前显示片刻答案

【问题标题】：JavaScript AppendChild display for a short moment before being resetJavaScript AppendChild 在重置前显示片刻
【发布时间】：2018-07-11 05:15:37
【问题描述】：

我正在尝试使用在单击超链接时调用 Javascript 函数的超链接将一些 HTML 数据插入到 div 标记中。

HTML 数据有效，我要显示的项目出现，但在执行后立即消失。

我尝试了 event.preventDefault()，它适用于基于 Chrome 的浏览器，但不适用于 Firefox。我在 Javascript 函数的末尾尝试了“return false”，但它不起作用。

代码如下：

<div id="doHere"></div>
<p>Toggle <a href="" onclick="toggle()">HERE</a> !!!</p>
<script>
  function toggle() {
    // event.preventDefault(); // Does not work on Firefox
    document.getElementById('doHere').innerHTML = '<ol><li> Test test </li></ol>';
    // return false; // Not working on both Chrome and Firefox
  }
</script>

如何确保编辑后的 HTML 是永久性的？

【问题讨论】：

标签： javascript html preventdefault

【解决方案1】：

尝试为href 使用“#”值

<div id="doHere"></div>
<p>Toggle <a href="#" onclick="toggle()">HERE</a> !!!</p>
<script>
  function toggle() {
    // event.preventDefault(); // Does not work on Firefox
    document.getElementById('doHere').innerHTML = '<ol><li> Test test </li></ol>';
    // return false; // Not working on both Chrome and Firefox
  }
</script>

【讨论】：

很高兴听到这个消息：D

【解决方案2】：

在href 属性中使用javascript:void(0);：

<html>
    <body>      
        <div id="doHere"></div>        
        <p>Toggle <a href="javascript:void(0);" onclick="toggle()">HERE</a> !!!</p>        
        <script>
            function toggle() {
                document.getElementById('doHere').innerHTML = '<ol><li> Test test </li></ol>';
            }
        </script>
    </body>
</html>

【讨论】：