Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Re-ordering Elements (.insertBefore() and .appendChild())

Re-ordering Elements (.insertBefore() and .appendChild())

This example shows how to re-order elements.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<script type="text/ecmascript"><![CDATA[
function putToBottom(evt) {
//get element reference
var element = evt.target;
//insert selected element before the first child
//first test if it isn't already the first Child
if (element.previousSibling) {
element.parentNode.insertBefore(element,element.parentNode.firstChild);
}
}
function putToTop(evt) {
//get node reference
var element = evt.target;
//appendChild after the last child
element.parentNode.appendChild(element);
}
]]></script>
<g>
<rect width="70" height="50" x="10" y="5" fill="blue"
onclick="putToBottom(evt)"/>
<rect width="70" height="50" x="20" y="25" fill="red"
onclick="putToBottom(evt)"/>
<rect width="70" height="50" x="30" y="45" fill="yellow"
onclick="putToBottom(evt)"/>
<rect width="70" height="50" x="40" y="65" fill="orange"
onclick="putToBottom(evt)"/>
<rect width="70" height="50" x="50" y="85" fill="green"
onclick="putToBottom(evt)"/>
<text x="120" y="30">Click on a rectangle to put it

<tspan x="120" dy="15">to the bottom of all rectangles.</tspan></text>
</g>
<g transform="translate(0,150)">
<rect width="70" height="50" x="10" y="5" fill="blue"
onclick="putToTop(evt)"/>
<rect width="70" height="50" x="20" y="25" fill="red"
onclick="putToTop(evt)"/>
<rect width="70" height="50" x="30" y="45" fill="yellow"
onclick="putToTop(evt)"/>
<rect width="70" height="50" x="40" y="65" fill="orange"
onclick="putToTop(evt)"/>
<rect width="70" height="50" x="50" y="85" fill="green"
onclick="putToTop(evt)"/>
<text x="120" y="30">Click on a rectangle to put it
<tspan x="120" dy="15">on the top of all rectangles.</tspan></text>
</g>
</svg>

Link to example 9 (reorder_elements.svg) – in a separate window)

In some cases it is necessary to re-order elements. The methods .insertBefore() and .appendChild() do this. .insertBefore(newChild,refChild) needs two arguments, the first is the reference to the element to be inserted before the other element and the second is the reference to the other element. In our example we first test, if the element is not already the first Child. element.previousSibling would return false if the element is already the first child of the group. element.appendChild(newChild) has already been demonstrated. It appends a child reference to another element or group. The new element is inserted after the last child element of the parent. As an argument it needs the child reference to be inserted or moved.

Comments