Javascript to replace content of div

**Kalyug** · 12-05-2010

Hello everyone ,

I am trying to create this cms in java script, but I got some problem with this procedure ..And I am unable to figure out how to replace the content of a <div> (It's not actually iframe

)

This is the explanation that I want to do , the <div> contains some text and pictures:

<div id="div1">Somethingggggg<img src="mine.png">Somethinggggggg</div>

I desired to replace this content "somethingggggg<img src="mine.png">Somethingggggg" with: "whatever<img src="whatever.png">whatever"

How it would be accomplished and how to manage this in javascript

Thanks..............

**Katty** · 12-05-2010

Hi,
I know the way through which you can do it as like, you need to only incorporate these things into your created code and it will do what you need to do but implement it with the proper place , This is code below,try this

Code:

document.getElementById('div1').innerHTML = 'whatever<img src="whatever.png">whatever';

Should do it.

**kelfro** · 12-05-2010

There are so many ways to do it but I will suggest you go for easier and proper way through which you can do it as you want. You can also include this javascript in your page...

<snip>

And then adjust reference your element IDs in a much simpler fashion (well it's much simple when you have a number of these.)

$('div1').innerHTML = 'whatever<img src="whatever.png">whatever';

**Deshpande** · 12-05-2010

Hello friends,

I am going to create a program for web development procedure but having some issues with that. When a user clicks on a link, I need to REPLACE the contents of a div with some other fresh content. I do not need to hide the div tag or something like that, I just want to replace this because it have some JavaScript variables.

<div id="scriptVars">
<script>
# script goes here
</script>
</div>

Do you have any idea, how to do it !???????

**Zecho** · 12-05-2010

This is one of the way that you should try to implement and execute it and I will suggest you work with this below written code and if you any problem related to implementation and execution then please let me know..for further information you can post next reply ...

Code:

<html>
<head>
	<title>Change div content</title>
	<style>
		
		div, a { padding:3px; margin:3px 3px 33px 3px; }
		#scriptVars1 { border:1px solid red; }
		#scriptVars2 { background:green; }
		#bob { border:3px solid blue; }
	</style>
	<script>
		function changeDivContent( nameOfDiv, newContent )
		{
			var div = document.getElementById( nameOfDiv );
			if( div )
			{
				div.innerHTML = newContent;
			}
		}
	</script>
</head>
<body>
	<a href="#" onclick="changeDivContent( 'scriptVars1', 'This is the new Content' )">Click here to change the content of the div below</a><a href="#" onclick="changeDivContent( 'scriptVars1', 'This is the new new Content' )">Click here to change the content of the div below again</a>
	<div id="scriptVars1">
		Script is here!
		<script>
			
		</script>
	</div>
	<a href="#" onclick="changeDivContent( 'scriptVars2', 'This is the new Content' )">Click here to change the content of the div following</a><a href="#" onclick="changeDivContent( 'scriptVars2', 'This is the new new Content' )">Click here to change the content of the div following now</a>
	<div id="scriptVars2">
		Script is here!
		<script>
			
		</script>
	</div>
	<a href="#" onclick="changeDivContent( 'bob', 'This is the new Content' )">Just click here to change the content of the div following</a><a href="#" onclick="changeDivContent( 'bob', 'This is the newly created Content' )">Just click here to change the content of the div following now</a>
	<div id="bob">
		Script is here!
		<script>
			
		</script>
	</div>
</body>
</html>

**Modifier** · 14-05-2010

You know a four line JavaScript function commits the replacement of text.some other JavaScript tells that function that div to target and what its new content shall be. I am going to show you a container content replacement JavaScript function that can do same.

<script type="text/javascript"></script>

The ReplaceContentInContainer() function requires two parameters, the id of the container and the content for the container.

**Raine** · 14-05-2010

This is an example of content in a div which is replaced with a click on a link. Represented code that performs the above work (consider one thing to put the four-line container content replacement JavaScript function anywhere on the current page).

Code:

<div 
   id="example1div" 
   style="border-style:solid; 
          padding:10px; 
          text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer('example1div',' Yeah! You clicked!')">
Click me to replace the content in the container.
</a>

nizam123 · 20-05-2010

I am trying to create this cms in java script, but I got some problem with this procedure ..And I am unable to figure out how to replace the content of a <div> (It's not actually iframe

----------------------

Thread: Javascript to replace content of div

Thread Tools