Re: Reordering DIV sections

evanburen@gmail.com wrote:
> I have 12 div sections on a page and I want the user to be able to
> specify the order in which they appear on the page. I'm thinking of
> something like this but want to ask what people think of this approach
> and maybe suggest another way or an article on how to do this. Thanks.
>
> // grab the innerhtml by:
> var theSpan1 = getElementById("span1")

getElementById is a method of the document object:

   var theSpan1 = document.getElementById("span1");

It is not strictly necessary to end all statements JavaScript with a
semi-colon, but it is recommended as good coding practice.

> var theSpan1HTML = theSpan1.innerHTML

Your HTML shows a div nested inside a span which is invalid HTML. What
various browsers might do with that is not necessarily consistent.
There seems little point is simply wrapping a div in a span anyway -
just remove the span elements (or the divs).

You have form controls inside the span. Their innerHTML may also differ
between browsers since innerHTML does not have a public standard for
implementation. When you 'move' the elements using innerHTML, you will
get different results on different browsers.

It would be far better to use DOM methods to move elements around, e.g.

   <div id="div01">div 01</div>
   <div id="div02">div 02</div>
   <input type="button" value="Swap divs"
    onclick="swapEm('div01','div02');">

   <script type="text/javascript">
     function swapEm(idA, idB)
     {
       var a = document.getElementById(idA);
       var b = document.getElementById(idB);
       a.parentNode.insertBefore(b, a)
     }
   </script>

Feature testing is required before using getElementById and
insertBefore, both are widely (though not universally) supported.

>
> // then grab the innerHTML of the span you want to "swap" it to:
> var theSpan2 = getElementById("span2")
> var theSpan2HTML = theSpan2.innerHTML
>
> // and switch the innerHTML's of the span by:
> theSpan1.innerHTML = theSpan2HTML
> theSpan2.innerHTML = theSpan1HTML
>
>
> <form>

Forms must have a action attribute, even if it's empty.

> <span id="span1">
> <div id="div1">

A block element (a div here) can't appear inside an inline element (a span).

> <select size="1" name="ddlOrder1">
> <option value="1">1</option>
> <option value="2">2</option>
> <option value="3">3</option>
> </select>
> Span1/Div1
> </div>
> </span>
>
> <br />

Is this really XHTML? If not, use normal HTML tags.

[...]

-- 
Rob