ということで、JavaScriptネタです。
とりあえず簡単なネタとして、今回はcreateElementについて取り上げてみようと思います。

名前から推測できると思いますが、その名前の通り、エレメント(オブジェクト)を生成します。
ここでのエレメントというのは、HTMLのタグのことです。
spanやらdivやらimgやら、色々作れます。
createElementで作ったエレメント(オブジェクト)に 対しては、
setAttributeで要素を追加したり、style.cssTextでスタイルの設定をしたりすることができます。
これらの追加要素はappendChildで適用(表示を反映)することができます。
逆にremoveChildで消すことも可能です。

これを用いることで、HTMLとJavaScriptで操作する要素を完全に切り分けることができます。
WEBデザイナさんからシステム用に加えておいたタグに関して、
「え～、このタグいるんですか？　表示に関係ないので、いらないと思って消しちゃいました～」
とか言われて顔を青くする、というようなことが減るかもしれません(笑)

で、サンプルとしてはこんなの↓。

この文字列をクリックすると、下に文字列が出るよ
この文字列をクリックすると、下に画像が出るよ
この文字列をクリックすると、文字列or画像が消えるよ



以下、ソース。

/**
 * spanエレメント(オブジェクト)追加
 */
function displayString_createElement() {
    var o = document.createElement("span");
    o.setAttribute("id", "js_koneta_01-01");
    o.innerHTML     = "JavaScript万歳！";
    o.style.cssText = "font-weight: bold;"
                          + "font-size: 12pt"
                          + "color: #00ff00";
    document.getElementById("js_koneta_01").appendChild(o);
}

/**
 * imgエレメント(オブジェクト)追加
 */
function displayImage_createElement() {
    var o = document.createElement("img");
    o.setAttribute("id", "js_koneta_01-01");
    o.setAttribute("src", "images/js/analysis_back.jpg");
    document.getElementById("js_koneta_01").appendChild(o);
}

/**
 * エレメント(オブジェクト)消去
 */
function deleteElement_createElement() {
    o = document.getElementById("js_koneta_01-01");
    document.getElementById("js_koneta_01").removeChild(o);
}

サンプルでは書いていませんが、

document.body.appendChild(object);

というような、body自体を指定することも可能です。
ブラウザ内に絶対座標でオブジェクトを表示する場合などは、
こちらの方が使い勝手がいいかもしれません。

簡単ですが、こんなところで。