Question

假设我有一个名为“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以供参考。

实现这一目标的最简单，最简单的方法是什么？

Answer 1

是的，这很简单。

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

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

Answer 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>

Answer 3

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

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

这对其中一个（player1）有用，你需要为其余的做。请注意，您还必须定义函数参数（文件，流，键）或从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);});

单击链接时使用Javascript更改HTML？

3 个答案: