-
September 19th, 2007, 10:31 AM
#1
Whats the easiest way
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?
-
September 19th, 2007, 12:35 PM
#2
Re: Whats the easiest way
Well, the easiest is to use a <div> tag and alter the innerHTML.
Code:
<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>
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
-
September 19th, 2007, 01:24 PM
#3
Re: Whats the easiest way
but if i click on that button three times, will it reproduce the html 3 times or just replace it?
-
September 19th, 2007, 01:26 PM
#4
Re: Whats the easiest way
4get it, tested and it works, thanks
-
September 19th, 2007, 01:55 PM
#5
Re: Whats the easiest way
You're welcome. Good luck!
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
-
September 19th, 2007, 04:15 PM
#6
Re: Whats the easiest way
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
-
September 19th, 2007, 04:29 PM
#7
Re: Whats the easiest way
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?
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
-
September 19th, 2007, 04:42 PM
#8
Re: Whats the easiest way
if i do something like this:
Code:
<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
Code:
<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 \"
Last edited by PeejAvery; September 19th, 2007 at 09:42 PM.
-
September 19th, 2007, 09:44 PM
#9
Re: Whats the easiest way
Originally Posted by Kovo88
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...
Code:
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.
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|