simplifying appendChild for multiple elements

[adam]

I have a rather old script that uses XMLHttpRequest to retrieve some
html and pops it into a div using innerHTML. I'd like to switch over to
using append child since not only is it standardized, but it'll save me
bandwidth in the long run.

The html returned looks something like:
----
<div style="position:absolute; z-index:50; width:256px; height:256px;
top:0px; left:0px">'.$tilesOverlay[NW].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:0px; left:256px">'.$tilesOverlay[NC].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:0px; left:512px">'.$tilesOverlay[NE].'</div>

<div style="position:absolute; z-index:50; width:256px;
height:256px; top:256px; left:0px">'.$tilesOverlay[W].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:256px; left:256px">'.$tilesOverlay[C].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:256px; left:512px">'.$tilesOverlay[E].'</div>

<div style="position:absolute; z-index:50; width:256px;
height:256px; top:512px; left:0px">'.$tilesOverlay[SW].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:512px; left:256px">'.$tilesOverlay[SC].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:512px; left:512px">'.$tilesOverlay[SE].'</div>
---

with obvious php elements in there.

as there's a total of nine divs, creating each of them and setting
their properties in a little loop shouldn't be a problem, but once I
start thinking of sending the remaining data over as a string and then
parsing through it as an array within the javascript, I'm struck there
must be an easier way. particularly since the z-index will change,
depending on what's calling that function.

Am I just being lazy, or am I missing something?

 

[adam]

suggestions for improvement welcome. to explain what this all does,
it's a set of images tiled (think google maps) that recieves lives
updates to its display via setInterval that sends an ajax request.


(note: RetrieveXML is the contents of an ajax request that returns a
string with php-generated variables. the format sent is the z-index
desired, a comma, then 9 pairs of reference IDs, a separating pipe,
the image sources for that tile, followed finally by a name to prepend
as the ID of the containing div)


cont = document.getElementById('eventContainer');
var len = cont.childNodes.length;
while (cont.hasChildNodes()) {
cont.removeChild(cont.firstChild);
}
var displayArray = RetrieveXML.split(',');
var positionArray = new Array(9);
positionArray[1] = 'top:0px; left:0px;';
positionArray[2] = 'top:0px; left:256px;';
positionArray[3] = 'top:0px; left:512px;';
positionArray[4] = 'top:256px; left:0px;';
positionArray[5] = 'top:256px; left:256px;';
positionArray[6] = 'top:256px; left:512px;';
positionArray[7] = 'top:512px; left:0px;';
positionArray[8] = 'top:512px; left:256px;';
positionArray[9] = 'top:512px; left:512px;';

for (var i = 1; i <= 9; i++) {
ts = document.createElement("DIV");
ts.setAttribute('style','position:absolute;
z-index:'+displayArray[0]+'; width:256px; height:256px;' +
positionArray);
ts.setAttribute('ID',displayArray[10]+i);

document.getElementById('eventContainer').appendChild(ts);

tsi = document.createElement("IMG");
displayImage = displayArray.split('|');

if(displayImage[1] == null) { } else {
tsi.setAttribute('border','0');
tsi.setAttribute('alt',displayImage[0]);
tsi.setAttribute('title',displayImage[0]);
tsi.setAttribute('src',displayImage[1]);

document.getElementById(displayArray[10]+i).appendChild(tsi);
}
}

I have a rather old script that uses XMLHttpRequest to retrieve some
html and pops it into a div using innerHTML. I'd like to switch over to
using append child since not only is it standardized, but it'll save me
bandwidth in the long run.

(snip)

 

[Jeremy]

I have a rather old script that uses XMLHttpRequest to retrieve some
html and pops it into a div using innerHTML. I'd like to switch over to
using append child since not only is it standardized, but it'll save me
bandwidth in the long run.

The html returned looks something like:
----
<div style="position:absolute; z-index:50; width:256px; height:256px;
top:0px; left:0px">'.$tilesOverlay[NW].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:0px; left:256px">'.$tilesOverlay[NC].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:0px; left:512px">'.$tilesOverlay[NE].'</div>

<div style="position:absolute; z-index:50; width:256px;
height:256px; top:256px; left:0px">'.$tilesOverlay[W].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:256px; left:256px">'.$tilesOverlay[C].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:256px; left:512px">'.$tilesOverlay[E].'</div>

<div style="position:absolute; z-index:50; width:256px;
height:256px; top:512px; left:0px">'.$tilesOverlay[SW].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:512px; left:256px">'.$tilesOverlay[SC].'</div>
<div style="position:absolute; z-index:50; width:256px;
height:256px; top:512px; left:512px">'.$tilesOverlay[SE].'</div>
---

with obvious php elements in there.

as there's a total of nine divs, creating each of them and setting
their properties in a little loop shouldn't be a problem, but once I
start thinking of sending the remaining data over as a string and then
parsing through it as an array within the javascript, I'm struck there
must be an easier way. particularly since the z-index will change,
depending on what's calling that function.

Am I just being lazy, or am I missing something?

I like to use responseXML and importNode (if supported) or a recursive
append (if importNode is unsupported - IE for example). Doing it this
way means you have to be careful with your response (i.e. it must be
valid XML) or this will not work.

Your child post says you don't necessarily need to pass HTML fragments,
but perhaps only data. If this is the case I would use JSON to return
anonymous objects with the data I want, and write a simple function that
uses DOM methods to display it appropriately. There is a C-extension to
PHP that is incredibly fast at JSON encoding, and an alternative
raw-PHP version of the same if you are unable to install extensions. It
makes JSON as easy as

header("Content-Type: text/plain");
echo json_encode($anything);

Objects, arrays, strings, numbers - you name it, json_encode will
properly pass it to your javascript with one line of code. See
http://www.json.org for more details.

Jeremy