javascript - AJAX - Element Update -

I want to reveal elements one by one. But they are fading at the same time, so I specify the ID. Is there a more reasonable way to achieve TIH?

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Script src = 'http: //code.jquery.com/jquery-2.1.0.min.js'> & Lt; / Script & gt; & Lt; Script & gt; Var i = 0; Function load XMLDoc () {var xmlhttp, txt, x; Xmlhttp = New XMLHttpRequest (); Xmlhttp.onreadystatechange = function () {xmlDoc = xmlhttp.responseXML; Txt = ""; X = xmlDoc.getElementsByTagName ("artist"); SetInterval (function () {txt + = x [i] .childNodes [0] .nodeValue + "
" $ ('# myDiv') .html ('& lt; p id = "p' + I + '"style =" display: none; "& gt;' + txt + '& lt; / p & gt;'); $ (" #p "+ i) .Fade in (1000); + = 1;}, 2000); } Xmlhttp.open ("GET", "http://www.w3schools.com/ajax/cd_catalog.xml", true); Xmlhttp.send (); } & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; H2 & gt; My CD Collection: & lt; / H2 & gt; & Lt; Div id = "mydiv" & gt; & Lt; / Div & gt; & Lt; Button type = "button" onclick = "loadXMLDoc ()" & gt; Get my CD collection & lt; / Button & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

Since you are already using jQuery ... not sure That it is more elegant .. but it is a little easier. Click here (function () {$ .ajax ({type: "GET", url: "Cd_catalog.xml", datatype: "xml", success: function (xml) {$ (xml) .find ('ARTIST'). (Function (i) {artist = $ (this) .text (); $ ("#myDiv"). ("& Lt; p class = 'artist'" "+ artist +" & lt; / p & gt; "); $ (" artist. ") Delay (i * 1000 ). FadeIn (1000);})}}})}};});

CSS:

  .artist {display: none; }  

and your existing HTML.