javascript - document.write 问题

Question

我试过这样的事情，

  <script>
    function sample(image){
            document.write('<img src="photo/'+image+'" width=200 height=200/>');
         //document.open("photo/"+image);
    }
</script>

<select name="selection">
          <option onmouseover="return sample('07A31A1250.jpeg')">Aaaaaaaa</option>
          <option onmouseover="return sample('07A31A1251.jpeg')">Bbbbbbbb</option>
          <option onmouseover="return sample('07A31A1251.jpeg')">Cccccccc</option>
          <option onmouseover="return sample('07A31A1250.jpeg')">Dddddddd</option>
  </select>

我编写此代码的目的是在鼠标悬停在示例方法上时显示指定的图像。 但是当我将鼠标指针放在选项上时，相应的图像会加载到整个页面中，而不是像弹出窗口一样显示。如何解决我的问题。？？？

它在 firefox 浏览器中受支持，但在 chrome 中不受支持。在不支持鼠标悬停选项的浏览器中是否有任何变通方法可以做到这一点？

Answer 1

document.write 可以追溯到 javascript 的第一天，并且早于我们现在可以做的所有花哨的 DOM 东西。您只能在页面实际加载期间调用 document.write。如果您之后调用 document.write，您将用您尝试 .write() 的任何内容替换当前文档(您的整个页面)。

此外，document.write 的输出(如果使用得当)会进入调用 document.write 的确切位置，因此即使您的代码正常工作，您最终也会得到:

<option onmouseover="<img src="photo/07A31A1250.jpeg" width=200 height=200/>">Aaaaaaaa</option>

这不是你想要的。

考虑使用 jquery对于这类事情，并使用适当的 DOM 操作技术。