Reordering DIV sections

[evanburen]

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")
var theSpan1HTML = theSpan1.innerHTML

// 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>
<span id="span1">
<div id="div1">
<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 />

<span id="span2">
<div id="div2">
<select size="1" name="ddlOrder2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Span2/Div2</div>
</span>

<br />

<span id="span3">
<div id="div3">
<select size="1" name="ddlOrder3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Span3/Div3</div>
</span>

<input type="submit" value="Save Profile" class="smalltext"
name="btnSaveProfile" onclick="changeOrder()">


</form>

 

[RobG]

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.


[...]

 

[Randy Webb]

RobG said the following on 1/30/2006 10:04 PM:

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.

Depending on the statement, of course
In this case it doesn't hurt to add it though.