Whats the easiest way

[Kovo88]

to insert HTML onto a page on the fly or by request using ajax? Now, I dont mean import an external html file into a div, but I mean, literally import html code (predefined somewhere) and place it on the page. And Id want this to happen infinitely. For example, I want a button on a html page to insert the following: <div>blah</div><div class="ff">ddd</div>etc...

Now everytime I click this button, it will insert that html into the page.
Is AJAx my answer or am I looking at the wrong client-side script?

[PeejAvery]

Well, the easiest is to use a <div> tag and alter the innerHTML.

<script type="text/javascript">
var theInteger = 0;
function addToDiv(){
  var theDiv = document.getElementById('newContent');
  theDiv.innerHTML += 'Testing...' + theInteger + '<br />';
  theInteger++;
}
</script>

<input type="button" value="Add to Div" onclick="addToDiv()" />
<div id="newContent"></div>

[Kovo88]

but if i click on that button three times, will it reproduce the html 3 times or just replace it?

[Kovo88]

4get it, tested and it works, thanks

[PeejAvery]

You're welcome. Good luck!

[Kovo88]

hey, another question. What if the inserted html code is very long... several lines. Ive noticed that the script breaks if I enter html with sveral lines. Is there a way around this?

thanks

[PeejAvery]

The script won't "break" if you are inserting a lot of HTML. You must be writing your strings wrong. Can you post some code?

[Kovo88]

if i do something like this:

<script type="text/javascript">
var theInteger = 0;
function addToDiv(){  var theDiv = document.getElementById('newContent');
  theDiv.innerHTML += '<div id="scont">
						<div class="inner" id="inner">
							<div class="innertopleft">
								<div class="innertopright">
								</div>
								<div class="flexcroll" id="flexcroll" onmouseover="javascript:insertRemoveP(false)">
									<div id="dynamic">
										';
  theInteger++;
}
</script>

it wont work, itll give me an error, but if i place all that code on a single line (backspacing it all), it works fine

<script type="text/javascript">
var theInteger = 0;
function addToDiv(){
  var theDiv = document.getElementById('newContent');
  theDiv.innerHTML += '<div id="scont"><div class="inner" id="inner"><div class="innertopleft"><div class="innertopright"></div><div class="flexcroll" id="flexcroll" onmouseover="javascript:insertRemoveP(false)"><div id="dynamic">';
  theInteger++;
}
</script>

btw, for the html code within, i replace all quotations with \"

[PeejAvery]

it wont work, itll give me an error, but if i place all that code on a single line (backspacing it all), it works fine

That is because you can't have multi-line variables.

You have to do something like...

theDiv.innerHTML += '<div>';
theDiv.innerHTML += '</div>';

Also, if you are doing this function multiple times, you will have many duplicate IDs for the <div> tags. You will need to use the incrementing variable to make an incrementing ID.