Node.appendChild(Node)の挙動

いま、

<div id="content">
//ここからjavascriptの描画部分
<img />
<span>testtest</span>
//ここまでjavascriptの描画部分
<div>

とする。

function $id(id) {
  return document.getElementById(id);
}
var content = $id("content");
var df = document.createdocumentFragment();

で取得して、imgは迷わず、

var img = document.createElement("img");
img.src = "##";
img.alt = "$$";
df.appendChild(img);

で、何の問題もなくOK!!

spanの取得方法が微妙に間違える。
df.appendChild(newNode)の戻り値はnewNode[Object NodeObject]であることに注意。

戻り値を追加されたdf[Object NodeObject]と勘違いしてしまうとこうなる。

var spanDate = document.createElement("span");
var text = document.createTextNode("creature");
var spanText = spanDate.appendChild(text);
df.appendChild(Spantext);

これじゃあ、span要素は追加されないのは当然。
三行目のvar spanText = spanDate.appendChild(text);
が間違いで、ここはただのテキストノードです。

var spanDate = document.createElement("span");
var text = document.createTextNode("creature");
spanDate.appendChild(text);
df.appendChild(spanDate);

これが正解。だから、３行目と４行目をまとめたりして、

df.appendChild(spanDate.appendChild(text));

とすると、うまくいかないよ。

その２．

window.onload = function() {
  var div = document.getElementById("content");
  var p = document.createElement("p");
  var span = document.createElement("span");
  var result = p.appendChild(span);
  div.appendChild(p);

と書くと、
div--p--span
となるが、一行足して、

window.onload = function() {
  var div = document.getElementById("content");
  var p = document.createElement("p");
  var span = document.createElement("span");
  var result = p.appendChild(span);
  div.appendChild(p);
  div.appendChild(result);
}

と書くと、
div---p
∟span
となる。
つまり、resultはspanと全く同じもの（コピーではない)
当然、

span.appendChild(document.createTextNode("second"));

をついかしても、

result.appendChild(document.createTextNode("second"));

をついかしても、
div---p
∟span--#text
と同じように追加される。コピーができるのではないことに注意。