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>

Answers


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.


Need Your Help

XSL outputting more than expected

xslt xpath

I'm fairly new to XSLT and XPath and have been banging my head against the wall for a while on this problem.

PHP content caching for javascript and css

php javascript css caching

I have a unique problem, which is proving difficult to solve using google. I am consolidating all of my javascript and css into separate php files, which use require_once() to pull the contents of ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.