appendchild

What's the difference between: var div = document.createElement('div');//output -> [object HTMLDivElement] document.getElementById('container').appendChild(div); and: var div = '<div></div>'; document.getElementById('container').appendChild(div);//output -> <div></div> Shouldn't both be the same? And if not, how do I get the second version to work? Sarfraz The latter is simply a string containing HTML while the first is an object. For the first, you need appendChild while for the second, you need to append to innerHTML . shouldn't both be the same? and if not, how do i get the 2nd version to

I need to sort out the elements that are already displayed in ascending order so that they just rearrange. I need to sort them out by the values in their data-val attributes. <div id="a" class="item" data-val="6">Item a</div> <div id="b" class="item" data-val="8">Item b</div> <div id="c" class="item" data-val="2">Item c</div> <div id="d" class="item" data-val="5">Item d</div> <br /> <button onclick="sortOut()">Sort Out</button> I made an example here: http://jsfiddle.net/quatzael/uKnpa/ I dont know how to do that. I kind of started but it is probably wrong. I need the function to firstly find

I have a page with an svg tag. The page has a button called "Preview" which on clicking should open a new window with the image (svg). Below is a piece of code which works in Chrome/Firefox but not in IE (I'm using IE 9- IE9 standards mode) var w = window.open(); var svg = $('#chart'); var svgPrint = svg.cloneNode(true); svgPrint.setAttribute('xmlns','http://www.w3.org/2000/svg'); w.document.body.appendChild(svgPrint); Any suggestions would be highly appreciated. Thanks. Mirko Cianfarani IE will block appending any element created in a different window context from the window context that the

Here's some sample code: function addTextNode(){ var newtext = document.createTextNode(" Some text added dynamically. "); var para = document.getElementById("p1"); para.appendChild(newtext); $("#p1").append("HI"); } <div style="border: 1px solid red"> <p id="p1">First line of paragraph.<br /></p> </div> What is the difference between append() and appendChild() ? Any real time scenarios? The main difference is that appendChild is a DOM method and append is a jQuery method. The second one uses the first as you can see on jQuery source code append: function() { return this.domManip(arguments,

This question already has an answer here: How to insert an element after another element in JavaScript without using a library? 17 answers I would like to append an li element after another li inside a ul element using javascript, This is the code I have so far.. var parentGuest = document.getElementById("one"); var childGuest = document.createElement("li"); childGuest.id = "two"; I am familiar with appendChild, parentGuest.appendChild(childGuest); However this appends the new element inside the other, and not after. How can I append the new element after the existing one? Thanks. <ul> <li id=

I have seen a few different methods to add elements to the DOM. The most prevelent seem to be, for example, either document.getElementById('foo').innerHTML ='<p>Here is a brand new paragraph!</p>'; or newElement = document.createElement('p'); elementText = document.createTextNode('Here is a brand new parahraph!'); newElement.appendChild(elementText); document.getElementById('foo').appendChild(newElement); but I'm not sure of the advantages to doing either one. Is there a rule of thumb as to when one should be done over the other, or is one of these just flat out wrong? Wayne Burkett Some notes