<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("input").click(function(){ $.ajax({ url: 'chapter689.xml', dataType: 'xml', success: function(data){ var i = 0; $("colors > color",data).each(function(){ $("div:eq(" + i + ")") .text($("colorName",this).text()) .css("background-color",$("colorCode",this).text()) i++ }); } }); }); }); </script> <style type="text/css"> div{ width:200px; height:200px; background-color:#808080; text-align:center; line-height:200px; margin:10px; } </style> </head> <body> <input type="button" value="click"> <div>grey</div> <div>grey</div> <div>grey</div> </body> </html>