如何清除内部 HTML答案

【问题标题】：How do I clear inner HTML如何清除内部 HTML
【发布时间】：2014-04-30 21:16:19
【问题描述】：

我一直在摆弄这个，但它不起作用，我不知道为什么。请帮忙。这是我所拥有的：

<html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
    function go(what) {
        document.getElementById("goy").innerHTML = what;
    }
    function clear() {
        document.getElementById("goy").innerHTML = "";
    }
    </script>
</body>
</html>

鼠标悬停工作并在 div 中显示文本，但是当我将鼠标移出 h1 标签时，文本停留在那里，我不知道为什么，不胜感激。

【问题讨论】：

请在此处查看我的答案：stackoverflow.com/a/21975639/218196。在您的情况下，clear 指的是document.clear：developer.mozilla.org/en-US/docs/Web/API/document.clear

标签： javascript html innerhtml

【解决方案1】：

问题似乎是全局符号clear 已在使用中，而您的函数未能成功覆盖它。如果您将该名称更改为其他名称（我使用了blah），它就可以正常工作：

直播：Version using clear which fails | Version using blah which works

<html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 onmouseover="go('The dog is in its shed')" onmouseout="blah()">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
    function go(what) {
        document.getElementById("goy").innerHTML = what;
    }
    function blah() {
        document.getElementById("goy").innerHTML = "";
    }
    </script>
</body>
</html>

这很好地说明了基本原则：尽可能避免使用全局变量。浏览器中的全局命名空间难以置信地拥挤，当发生冲突时，你会得到类似这样的奇怪错误。

由此得出的结论是不要使用旧式onxyz=... 属性来连接事件处理程序，因为它们需要全局变量。相反，至少使用代码来连接：Live Copy

<html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 id="the-header">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
      // Scoping function makes the declarations within
      // it *not* globals
      (function(){
        var header = document.getElementById("the-header");
        header.onmouseover = function() {
          go('The dog is in its shed');
        };
        header.onmouseout = clear;

        function go(what) {
          document.getElementById("goy").innerHTML = what;
        }
        function clear() {
          document.getElementById("goy").innerHTML = "";
        }
      })();
    </script>
</body>
</html>

...甚至更好的是，使用 DOM2 的 addEventListener（或 IE8 及更早版本上的 attachEvent），这样您就可以为一个元素上的事件设置多个处理程序。

【讨论】：

非常感谢，我很沮丧。这现在完美无缺。也感谢您的快速响应。

【解决方案2】：

const destroy = container => {
  document.getElementById(container).innerHTML = '';
};

更快的上一个

const destroyFast = container => {
  const el = document.getElementById(container);
  while (el.firstChild) el.removeChild(el.firstChild);
};

【讨论】：

【解决方案3】：

不幸的是，h1 标签没有收到 onmouseout 事件。

下面的简单 Javascript sn-p 将适用于所有元素，并且只使用 1 个鼠标事件。

注意：“sn-p 中的边框用于提供元素的视觉分界。”

document.body.onmousemove = function(){ move("The dog is in its shed"); };

document.body.style.border = "2px solid red";
document.getElementById("h1Tag").style.border = "2px solid blue";

function move(what) {
    if(event.target.id == "h1Tag"){ document.getElementById("goy").innerHTML = "what"; } else { document.getElementById("goy").innerHTML = ""; }
}

<h1 id="h1Tag">lalala</h1>
<div id="goy"></div>

这也可以在纯 CSS 中通过将悬停选择器 css 属性添加到 h1 标记来完成。

【讨论】：

【解决方案4】：

看看这个。使用 jQuery 的干净简单的解决方案。

http://jsfiddle.net/ma2Yd/

    <h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
    <div id="goy"></div>


    <script type="text/javascript">

    $(function() {
       $("h1").on('mouseover', function() {
          $("#goy").text('The dog is in its shed');
       }).on('mouseout', function() {
          $("#goy").text("");
       });
   });

【讨论】：

使用 jQuery 简洁明了，但仍然使用内联 js：P
我在任何地方都看不到jQuery 标签。来自javascript 标记描述：“除非还包括框架/库的标记，否则需要纯 JavaScript 答案。”