insertBeforeで躓いた件

テーブル内の要素を上へもしくは下へ入れ替えが出来る画面を造っていたときにはまった。

入れ替えにはinsertBeforeで出来ると聞いて。

やり方はいろいろあれど、楽そうだったのでinsertBefore を使ってノードに挿入する手段を考えてみた。

参考サイト：
DOM Node チラ裏 - latest log

作ってみたらうまく動かない。

単純なテーブルで書いてみたら動くときと動かないときがある。

<tbody id="tbody1">
  <tr>
    <td>
    <input type="text" value="1" />
    <i onclick="up(this);" class="fa fa-chevron-up"></i>
    <i onclick="down(this);" class="fa fa-chevron-down"></i>
    </td>
  </tr>
  <tr>
    <td>
    <input type="text" value="2" />
    <i onclick="up(this);" class="fa fa-chevron-up"></i>
    <i onclick="down(this);" class="fa fa-chevron-down"></i>
    </td>
  </tr>
  <tr>
    <td>
    <input type="text" value="3" />
    <i onclick="up(this);" class="fa fa-chevron-up"></i>
    <i onclick="down(this);" class="fa fa-chevron-down"></i>
    </td>
  </tr>
</tbody>

上に移動する処理(下へは省略)

function up(obj) {

  var tbody = document.getElementById("tbody1");
  var tr = obj.parentNode.parentNode;

  if(tr.previousSibling != null & tr.previousSibling.nodeName === "TR") {
    // 「tr」を上に挿入
    tbody.insertBefore(tr, tr.previousSibling);
  }

}

事象

tr.previousSiblingが#textだったりtrだったりする。

前の要素が#textになっているのはなぜ？と不思議に思い、
console.log(tr.previousSibling.nodeValue);
で値を出したら空白が表示されてた。

空白？

原因

htmlにtbody以下は空白は入れてはいけない。
見栄えよくするために空白を入れているとその空白も要素だと勘違いされるっぽい？？
とりあえず改行なし・空白なしで修正してみたら思ったとおりに動いた。