单击链接时使用 Javascript 更改 HTML？ [复制]答案

【问题标题】：Changing HTML with Javascript when a link is clicked on? [duplicate]单击链接时使用 Javascript 更改 HTML？ [复制]
【发布时间】：2013-04-25 21:48:44
【问题描述】：

假设我有一个名为“videoplayer”的 DIV——在这个 DIV 中是一个图像。

点击链接时，有没有一种简单的方法可以更改此 DIV 中的 HTML 代码？

例如，这是当前的 DIV：

    <div class = "big_player" id="player1">
             <img src="whatever.jpg">
    </div>

点击链接时，我希望 HTML 更改为：

    <div class = "big_player" id="player1">
             <script>
                playVideo(file, stream, key);
             </script>
    </div>

我有多个缩略图/链接（总共 12 个），其中包含所有不同的“文件、流、密钥”变量。请查看 here 以供参考。

实现此目的最简单、最简单的方法是什么？

【问题讨论】：

用jQuery可以轻松搞定，但是file、stream、key从哪里来？
欢迎来到Stack Overflow;阅读faq。当您现有的问题没有获得足够的流量时，正确的解决方案是将其编辑为更好的问题。不可以简单地再次重新发布相同的问题。

标签： javascript jquery html

【解决方案1】：

是的，很简单。

var div = document.getElementById("player1");
div.onmousedown = function() {
    div.innerHTML = "stuff!"
};

JSFiddle：（点击测试）http://jsfiddle.net/yjdfg/

【讨论】：

【解决方案2】：

你可以做一个这样的函数：

function changeDiv(divID) {
    var div_to_change = document.getElementById(divID);
    div_to_change.innerHTML = 'whatever you want here';
}

并用

调用

<a onClick="changeDiv('player1')" href="#">Click to change div</a>

【讨论】：

【解决方案3】：

我相信你想在点击时运行脚本：

$('#player1').click(function(){playVideo(file, stream, key);});

这适用于其中一个（玩家 1），你需要为其余的人做。请注意，您还必须定义函数参数（文件、流、键）或从 div 属性中获取它们，例如。如果它们是动态的，请使用on 而不是click。

但是，如果你真的想改变 div 的内容（无论出于什么原因），下面是放在 click 函数中的代码：

var html_code = "<script>playVideo(file, stream, key);</script>";
$('#player1').html(html_code);

编辑

访问您的网站后，我注意到您不是单击大 div 来更改其内容，而是单击其他内容。在这种情况下，正确的选择器是#miniplayer1、#miniplayer2等，这样原始代码就变成了$('#miniplayer1').click(function(){playVideo(file, stream, key);});

【讨论】：