Question

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

<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 scripting来选择元素并替换其内容：

<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".'
    );

}

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

在网页中完成更改和添加内容

2 个答案: