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

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

} 

安装jQuery是为包括jQuery代码调用自己的JavaScript代码之前一样简单！获取源over here。