Am trying to figure out how to use this appendChild to add new values to my div tag. Currently I have a div
<div id="listarticles"></div>
and I am using AJAX to add values to this div however
document.getElementById("listarticles").innerHTML = response;
replaces the entire div what javascript code should I use to solve this issue. Will it be
document.getElementById("listarticles").appendchild(response);
?
If you goal is to simply modify the contents of the DIV use:
document.getElementById("listarticles").innerText = response;
The ‘appendChild’ requires a reference to an XML/HTML entity that will be added AFTER the div you reference.
My goal is to modify the contents but it seems the way I am calling the AJAX it is replacing all the content instead of adding to it the code that you put there I am already using so it doesn’t solve my problem.
‘innerHTML’ replaces the entire HTML entity.
‘innerText’ replaces the contents of the HTML entity you specify.
Did you misread my code snippet? That should work for you.
wow yes i did misread your post, will try this as soon as I get chance to thanks alot.
This code doesn’t work in my case either i still only print one line and now its not even a link just text only
innerText is proprietary IE only code. To use appendChild you need to have constructed the content with the appropriate DOM calls to createElement and createTextNode first.
document.getElementById("listarticles").innerHTML+= response;
maybe am doing something else incorrect because I am still getting only one result. So I will explain the entire scenario. I have some ids in localstorage I want to use ajax to retrieve each of the items associated with the id. Example 1&2 are in memory so it will call the server (php) to retrieve each item so in the end both item 1 and item 2 will be show on the page. I am doing this in a loop which the httpRequest is part of.
Any suggestions.
Perhaps if you show us more of the code so we can see what it is currently doing.
Sure my issue comes in at this point because all the values are in memory already
<script>
window.onload = function() {
displaybookmarks();
};
function displaybookmarks(){
for(var i=0;i<localStorage.length;i++)
{
var keyName = localStorage.key(i);
var value = localStorage.getItem(keyName);
alert(value);
getbookmarks(value)
}
}
function getbookmarks(value) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'includes/getbookmarks.php';
var pmeters = '&value='+value;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("listarticles").innerHTML = '<img src="images/spiral.gif" align="center" />';
}
if(HttPRequest.readyState == 4) // Return Request
{
var response = HttPRequest.responseText;
document.getElementById("listarticles").innerHTML+= response;
}
}
}
</script>
<div id="listarticles"></div>
There is my code with the loop and everything.
ok I found out what is my problem. It seems the loop is executing faster than the xmlhttprequest. That why I only get one reply. What I need to do is create a AJAX queue. Anyone has a good example on how to create this.