javascript appendChildの戻り値

javascriptでDOMノードを操作する際によく使うのが、appendChildだ。

このメソッドは、引数(=appendしたChild)が戻り値になる、少し変わり者。

よって、

--これ----------------
var div = document.createElement("div");
div.style.padding = "10px";
document.body.appendChild(div);

var img = new Image(160, 100);
img.src = "http://.../img.jpg";
div.appendChild(img);
----------------------

と、

--これ-----------------
var div = document.body.appendChild(document.createElement("div"));
div.style.padding = "10px";

var img = div.appendChild(new Image(160, 100));
img.src = "http://.../img.jpg";
-----------------------

は同じであり、明らかに後者のほうがスマートな書き方だろう。

本当に知らないと損。