SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: appendChild

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    appendChild

    Am trying to figure out how to use this appendChild to add new values to my div tag. Currently I have a div
    HTML Code:
    <div id="listarticles"></div>
    and I am using AJAX to add values to this div however
    Code:
    document.getElementById("listarticles").innerHTML = response;
    replaces the entire div what javascript code should I use to solve this issue. Will it be
    Code:
    document.getElementById("listarticles").appendchild(response);
    ?

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    If you goal is to simply modify the contents of the DIV use:
    Code:
    document.getElementById("listarticles").innerText = response;
    The 'appendChild' requires a reference to an XML/HTML entity that will be added AFTER the div you reference.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ParkinT View Post
    If you goal is to simply modify the contents of the DIV use:
    Code:
    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.

  4. #4
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    '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.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ParkinT View Post
    '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.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Code:
    document.getElementById("listarticles").innerHTML+= response;
    The only code I hate more than my own is everyone else's.

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Perhaps if you show us more of the code so we can see what it is currently doing.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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

    Code:
    <script>
    		
    		window.onload = function() {
    		displaybookmarks();
    };
    Code:
    	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.

  12. #12
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •