javascript - 网页内容的完整更改和添加

Question

我正在尝试创建一个网页，当单击激活时，它会完全更改 div 元素的内容。我目前在 div 中嵌入了一些文本和视频，我想在单击 div 按钮时删除它们并添加新内容，例如链接、更多视频等。我没有找到很多关于这个主题的有用信息。任何帮助是极大的赞赏。这是一个小提琴的链接：

<div id="content">
<p>"Text, text, more text."</p>
<h1>"Text"</h1>
<img src="#"></img>
</div>

Answer 1

假设你有这样的事情：

<div id="somecontent"><video ...><p>Video Caption</p></div>

您可以使用简单的DOM 脚本来选择元素并替换其内容：

<script>
  var element = document.getElementById("somecontent");
  element.innerHTML = "<audio><p>New Caption</p>"
</script>

然后，您可以将此替换绑定到输入的 onclick 事件或样式为按钮的链接。

希望这可以帮助。

Answer 2

jQuery 可以帮助你很多这样的东西。例如，尝试 jQuery 的click和html方法。然后你可以做这样的事情：

$('.my_button').click(function() {

    // this function gets executed when an element
    // with the classname '.my_button' gets clicked

    $('.my_div').html(
        'this contents get inserted in ' +
        'the element with classname ".my_div".'
    );

}

安装 jquery 就像在调用自己的 javascript 代码之前包含 jquery 源代码一样简单！在这里获取源代码。