Support Icon
JavaScript | How to Dynamically Load an HTML <div> or <iframe> Tag
Social Media Banner I (3D Social Icon Set) Social Media Banner II (3D Social Icon Set)
								$('#s1').cycle({
												fx:     'zoom',
												easing: 'easeInBounce',
												delay:  -4000
												});
							
						

Nov 06 '12

By: Richard Guidry
Subject: JavaScript
Title: How to Dynamically
Load an HTML <div> or <iframe> Tag

JavaScript | Dynamically Load an HTML tags

JavaScript | HTML Tags

How to Dynamically Load an HTML <div> or <iframe> Tag

When Browsers load pages normally; they display parts of that page as they are downloaded (Though they’re some disparity of conduct amongst the many Browsers available). This generally means that the “Text” will materialize before any “Images” (RE: Because “Images” are generally larger in file size and take longer to load).

They're several different methods for dynamically changing the contents within a set of HTML tags; however this blog will specifically discuss three (3) techniques for manipulating the HTML <div> and <iframe> tags.

The method below can be used to postpone the loading of very large images, dynamically produce the HTML document's contents, or could even be used to slow the loading file components until after the bulkiness of the HTML document has been processed.

Dynamically Changing the HTML Contents Within a <div></div>

Below; the HTML contents contained within a set of <div></div> tags will be dynamically changed.

The Following Snippets of Code Will Be Used::

	<div id="IdentifyTheDiv">
		U.S. Website Creations
	</div>

Any HTML content enclosed between the above <div> and </div> will be replaced dynamically using the JavaScript code below.

<script type="text/javascript">
	document.getElementById('IdentifyTheDiv').innerHTML="Any HTML Contents Here ";
</script>

Using this method; we are able to dynamically change almost any valid HTML code.

The following example is provided below; simple click any one of the three (3) buttons to demonstrate the HTML contents changing.

Example:

Please Click One of the Three (3) Buttons Below and My Contents Will Change!

Dynamically Changing the HTML Contents Within a <iframe></iframe>

Below; the HTML contents contained within a set of <iframe></iframe> tags will be dynamically changed.

The Following Snippets of Code Will Be Used::

	<iframe name="Identify-iframe" src="//uswebsitecreations.com/iframe-content-1.html">
	</iframe>

Any HTML content enclosed between the above <iframe> and </iframe> will be replaced dynamically using the JavaScript code below.

	frames['Identify-iframe'].location.href='//uswebsitecreations.com/iframe-content-1.html'
	document.all.Identify-iframe.src='//uswebsitecreations.com/iframe-content-1.html'

Using this method; we are able to dynamically change almost any valid HTML code.

The following example is provided below; simple click any one of the three (3) buttons to demonstrate the HTML contents changing.

Example:

Changing Both <div> </div> and <iframe></iframe> tags.

Now, because the <div> tag allows all of the HTML contents within the tag to be changed it's possible to replace the contents with an inline-frame.

Example:

Please Click One of the Three (3) Buttons Below and My Contents Will Change!

 

Below you can download a sample HTML/JavaScript file of the examples above.

 

Developed by on

E-Mail | Design Team - U.S. Website Creations.com

 

Follow Me On Google

U.S. Website Creations

By building a website with HTML, CSS, JavaScript, and PHP, just about anything is possible. Browse this site for examples of the type of Website Development I can do for you...

SERVICES

Website Development, PhP and/or JavaScript Programming, eCommerce Web Development, MySQL Database Development, SEO Services, Full-Service Web Hosting, and Web Consultant are all here.

CLIENTS

Wings Over Colorado, LLC. | Stacys Got Greek | Central Gun Exchange, LLC. | and many more...

U.S. Website Creations Text
 
Powered by Awesome
Top