niche Posted December 7, 2011 Share Posted December 7, 2011 xmlhttp.responseText = "Bob , Brittany , Brian" var txt=xmlhttp.responseText;var txt2 = txt.slice(0,txt.indexOf(",")); slices off Bob. How do I get all three into a var with line breaks between them so I can display them with document.getElementsByTagName('body')[0].appendChild(div);document.getElementById('link_container').innerHTML=????????; Link to comment Share on other sites More sharing options...
JamesB Posted December 7, 2011 Share Posted December 7, 2011 try this: .innerHTML = xmlhttp.responseText.split(',').join('<br>'); split() changes a string to an arrayjoin() changes an array to a string Link to comment Share on other sites More sharing options...
niche Posted December 7, 2011 Author Share Posted December 7, 2011 Perfect! Thank-you very much.I have another question. I haven't found a good explanation for the array index and how it works.I understand that [0] is the array index in:document.getElementsByTagName('body')[0].appendChild(div);Can you explain the array index and how it works, or provide a reference that you like? Link to comment Share on other sites More sharing options...
JamesB Posted December 7, 2011 Share Posted December 7, 2011 edit: document.getElementsByTagName does not return an Array, it returns a NodeList, thanks to ShadowMage and thescientist for clearing that up! well an array contains 0 or more "elements" (different jargon to "html elements")and each array element will have an index and a value. (the index is also called the key) var arr = []; // create an array, which has 0 elements so fararr[0] = 'test'; // store the value 'test' into the array at index 0arr[1] = 50; // store the value 50 into the array at index 1arr[2] = true; // store the value true into the array at index 2// the array now has 3 elements // you can read the value of an element by using the index between the [ and ] symbols:alert(arr[0]); // alerts 'test'alert(arr[1]); // alerts 50 document.getElementsByTagName('body') returns an array, where the amount of elements in that array, is the amount of html <body> elements found.all documents will probably just contain 1 <body> element, so "document.getElementsByTagName('body')" will return an array with 1 element, and the <body> element can be accessed in the array via index 0. another example: <!doctype html><html><body> <div>aaaaaa</div><span>bbbbbb</span><p>ccccccc</p><div>ddddddddd</div><div>eeeeeeeee</div> </body></html> var divs = document.getElementsByTagName('div');alert( divs.length ); // alerts 3, because there are 3 elements in the array, and document.getElementsByTagName('div') found 3 <div> elements alert( divs[0].innerHTML ); // alerts "aaaaaa"alert( divs[1].innerHTML ); // alerts "ddddddddd"alert( divs[2].innerHTML ); // alerts "eeeeeeeee" Link to comment Share on other sites More sharing options...
Ingolme Posted December 7, 2011 Share Posted December 7, 2011 An array is a list starting from 0 instead of 1. Each number represents a position in the list. Link to comment Share on other sites More sharing options...
ShadowMage Posted December 7, 2011 Share Posted December 7, 2011 document.getElementsByTagName('body') returns an arrayTechnically, it returns a NodeList. A NodeList and an array are very similar, but have distinct differences. The most notable of which is that a NodeList is a live collection of DOM elements. Meaning that the list will change automatically when the DOM changes. Link to comment Share on other sites More sharing options...
thescientist Posted December 7, 2011 Share Posted December 7, 2011 Technically, it returns a NodeList. A NodeList and an array are very similar, but have distinct differences. The most notable of which is that a NodeList is a live collection of DOM elements. Meaning that the list will change automatically when the DOM changes.'and even more notably, is not of type Array, meaning it doesn't "subscribe" to JS's native array methods.https://developer.mo...en/DOM/NodeList edit: haha, we used the same link for NodeList Link to comment Share on other sites More sharing options...
niche Posted December 7, 2011 Author Share Posted December 7, 2011 So, in the case of:document.getElementsByTagName('body')[0].appendChild(div); Is that the same as placing the div 1st in the body? ... and document.getElementsByTagName('body')[5].appendChild(div); would put it in the 6th position? Link to comment Share on other sites More sharing options...
ShadowMage Posted December 7, 2011 Share Posted December 7, 2011 getElementsByTagName('body')[0] is accessing the first body in the document. Ie, the body element at index 0. Using a 5 would try to access the 6th body in the document, ie, the body element at index 5. Since you can't (or shouldn't) have more than one body, the [5] will throw an error. Think of it this way: var bodies = document.getElementsByTagName('body'); //this is now a collection of body elements in the documentvar firstBody = bodies[0]; //retrieve the body element at index 0 in the collectionfirstBody.appendChild(div); //Add the div to the body element The appendChild method simply add the node to the end of the child list (a NodeList) so it would actually add it to the end of the body. Link to comment Share on other sites More sharing options...
niche Posted December 7, 2011 Author Share Posted December 7, 2011 firstBody.appendChild(div); would add appendChild(div); to the end of the array. Right?If so how would I place appendChild(div); at the beginning? Or, in the middle of 5 elements? Link to comment Share on other sites More sharing options...
justsomeguy Posted December 7, 2011 Share Posted December 7, 2011 It doesn't make sense to have an index for the body since there is only one, but the point is that document.getElementsByTagName always returns a list even if there is only one element in it (or none). Link to comment Share on other sites More sharing options...
justsomeguy Posted December 7, 2011 Share Posted December 7, 2011 The appendChild method is defined on all elements, it is used to add a child to a container element, like adding a form input to a form. This line: firstBody.appendChild(div); appends the element div to the element firstBody, and it places it at the end. So div is now the last element in the firstBody element. There are other methods for inserting elements at other positions. You can use insertBefore to insert an element before another one: https://developer.mozilla.org/En/DOM/Node.insertBefore Link to comment Share on other sites More sharing options...
ShadowMage Posted December 7, 2011 Share Posted December 7, 2011 firstBody.appendChild(div); would add appendChild(div); to the end of the array. Right? If so how would I place appendChild(div); at the beginning? Or, in the middle of 5 elements?appendChild adds the element to the end of the body. After all other elements contained in the body. It would be the same thing as:firstBody.innerHTML += "<div id='aDiv'>This is a div</div>"in which the string is appended to the end of the existing innerHTML. If you want to insert a node in a different location you can use insertBefore. Link to comment Share on other sites More sharing options...
niche Posted December 7, 2011 Author Share Posted December 7, 2011 It doesn't make sense to have an index for the body since there is only one, but the point is that document.getElementsByTagName always returns a list even if there is only one element in it (or none). The body index is basically always sterile? ShadowMage's explanation makes think bodies = document.getElementsByTagName('body'); "a collection of body elements in the document". Am I understanding what each is saying? Link to comment Share on other sites More sharing options...
justsomeguy Posted December 7, 2011 Share Posted December 7, 2011 Right, it's a collection of body elements in the document which only happens to ever contain 1 element. Link to comment Share on other sites More sharing options...
niche Posted December 7, 2011 Author Share Posted December 7, 2011 OK. That leads me to how to rearrange elements though I think that's another topic. So I need to thank JamesB, ingolme, ShadowMage, thescientist, and justsomeguy for an excellent topic. Link to comment Share on other sites More sharing options...
JamesB Posted December 7, 2011 Share Posted December 7, 2011 ah sorry about the Array/NodeList issue, never realized that!the idea of them being live sounds quite interesting, will defo look into that. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.