javascript - 单击链接时如何使用 Javascript 更改部分 HTML？

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>

完成此任务的最简单和最简单的方法是什么？

Answer 1

使用 Javascript：

<a id="link" onclick='change()' href="#">Link</a>

<script>
function change()
{
  var script = document.createElement('script');            
  script.innerHTML = 'playVideo(file, stream, key);';
  p = document.getElementById("player1");
  p.innerHTML = "";
  p.appendChild(script);
}
</script>

或者正如 Gaby 指出的那样，直接运行它

<script>
  function change()
  {
    playVideo(file, stream, key); 
  }
</script>

Answer 2

您可以使用该.html()方法，但如果您只想运行一个脚本，您可以直接执行它。

所以

$('linkID').on('click', function(e){
   e.preventDefault();

   $('#player1').html('new html here');

});

或用于运行您可能更喜欢的脚本（如果它符合您的需要）

$('linkID').on('click', function(e){
   e.preventDefault();

   playVideo(file, stream, key);

});

Answer 3

编辑

尝试这个：

$("img").on("click", function(e){

var content = "<script>" +
                   "playVideo(file, stream, key);" +
              "</script>";

$(this).parent().html(content);

});

只需确保playVideo()及其所有参数都存在。如果它不起作用，请给我反馈。如果失败，我们可能会使用eval() 。