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

Posted 2023-05-08

【中文标题】单击链接时如何使用 Javascript 更改部分 HTML？

【英文标题】：How to change parts of HTML with Javascript when a link is clicked on?

【发布时间】：2013-04-18 16:21:14

【问题描述】：

假设我有一个名为“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>

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

【问题讨论】：

你想解决什么问题？

当我们谈论 jQuery 时，点击事件就是您要寻找的。但我建议您在尝试实现复杂的东西之前阅读文档。

@DavidThomas 看到这个页面：***.com/questions/16181955/…

【参考方案1】：

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

所以

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

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

);

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

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

   playVideo(file, stream, key);

);

【参考方案2】：

使用 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>

【讨论】：

如果有多个视频要调用怎么办？我总共有12个视频，你好心分享的方法只支持一个链接/视频。

【参考方案3】：

编辑

试试这个：

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

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

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

);

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

【讨论】：

如果我有多个视频/缩略图怎么办？