Complete change and adding of content in webpage
I am trying to create a web page that, when click activated, changes completely the content of a div element. I currently have some text and a video embedded in the div, and I want to remove that and add new content, such as links, more videos, etc. when a div button is clicked. I have not found much helpful information on this subject. Any help is greatly appreciated. Here is a link to a fiddle:
<div id="content"> <p>"Text, text, more text."</p> <h1>"Text"</h1> <img src="#"></img> </div>
Assuming you have something like this:
<div id="somecontent"><video ...><p>Video Caption</p></div>
You can use simple DOM scripting to select the element and replace its contents:
<script> var element = document.getElementById("somecontent"); element.innerHTML = "<audio><p>New Caption</p>" </script>
You would then tie this replacement to the onclick event of an input or a link styled to look like a button.
Hope this helps.