Doc is looking at a X-Ray image in an online diagnostics system. When the mouse rolls over the body, an "advice box" appears at the bottom of the page with stats to help interpret the image. In case the box gets in the way, he's able to drag it around the page.

How can you dynamically restructure the page?

Add, remove, move, and overlay elements by manipulating the DOM. The DOM is a hierarchical structure that defines how elements relate to one another. By adjusting the DOM structure, you can adjust where elements appear on the page. There are also critical CSS styles that affect page structure - you can affect these by manipulating DOM elements' style attributes. Note: An online demo illustrates the code concepts throughout this Solution and the code snippets loosely follow from the demo.

Adding is normally achieved by introducing a new element as a child of an existing container element, such as body or div. For example, you can create a new div element and add it to a parent div:

    var message = document.createElement("span");
    $("container").appendChild(message);

Another way to insert an element is to append to the innerHTML property of the container element:

    $("container").innerHTML += "<span></span>";

The opposite action is removing. By removing an element from the DOM, you take it off the display:

    $("container").removeChild($("message"));

As a variant of adding and removing, you can keep an element on the page, but toggle its visibility using CSS. There are two alternative style properties you can use: The visibility and display style. The former will always preserve layout while the latter will cause the element to squeeze in and out when it's shown or hidden. So with no visibility, it's like the element's still there but wearing a coat of invisible paint. This makes layout easy, because everything stays where it is, but it can be ugly to have a big patch of whitespace on the page. With the display style, it's more like the element's really disappeared, so the other elements squeeze in to take the place it had occupied. This makes layout a bit more complex, but is usually better visually. The visibility property alternates between visible and hidden:

    $("message").style.visibility = "visible"; // Now you see me
    $("message").style.visibility = "hidden";  // Now you don't ("Invisible paint")

display is actually used for more than just showing and hiding an element - it also defines how an element appears when it is visible. Briefly, the main options are block (the default for div elements), inline (the default for span elements), and none when it's not to be shown.)

    $("message").style.display = "block";  // Now you see me, with block layout
    $("message").style.display = "inline"; // Now you see me, with inline layout
    $("message").style.display = "none";   // Now you don't ("Gone away")

You can move an element around in a couple of ways. First, you can remove it from one place in the DOM and add it to another:

    container.removeChild(message);
    extraContainer.appendChild(message);

Second, you can adjust CSS properties. The most direct styles are left, right, top, and bottom, which define the co-ordinates of the element in question:

    message.style.top = "150px";
    message.style.left = "50px";

But what is the (0,0) point these co-ordinates are relative to? The precise meaning of these properties is modulated by the positioning element.

Positioning is set with standard CSS styles:

    message.style.left = "150px";

Finally, you can also overlay elements. An HTML document has "2.5" dimensions, which is to say that it has a limited notion of depth in which elements are able to overlap each other. The critical CSS style here is zIndex, which signifies an element's depth. When two elements occupy the same portion of the page, the element which will appear in front is that with the higher zIndex. The zIndex is not a real depth, because all that matters is the relative ordering of zIndex values. Against a zIndex of zero, it makes no difference whether an element's zIndex is 1, 10, or 100. The default value is 0 and a zIndex can take on any positive or negative value.

    message.style.zIndex = -100; // Behind of all elements with default zIndex
    message.style.zIndex = 100;  // In front of all elements with default zIndex

The Basic Wiki Demo periodically polls for a fresh list of messages to display. Each time the list is retrieved, it removes all existing messages and adds the new list. The containing element is called messages and removing all messages involves running a loop across each of its children:

    while ($("messages").hasChildNodes()) {
      $("messages").removeChild($("messages").firstChild);
    }

Each message is used to create a new textarea element (among other things), which is then added to a new div, which in turn is added to the messages container:

    for (var i=0; i<wikiMessages.length; i++) {
      var messageArea = document.createElement("textarea");
      ...
      messageDiv = document.createElement("div");
      ...
      messageDiv.appendChild(messageArea);
      ...
      $("messages").appendChild(messageDiv);
      ...
    }

Page rearrangement is like adding, removing, and rearranging Post-It notes on a whiteboard.