Table内TDの子要素を移動させたいのですが・・

質問

初心者的な質問になるかもしれませんが、宜しくお願いします。
唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。

<DIV>.....</DIV> ← (*)

<Table>
<TR>
<TD>　　←　(1)
<SCRIPT ........</SCRIPT>
<A HREF="">........</A>
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
<TD>　　←　(2)
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
<TD>　　←　(3)
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
</TABLE>

(1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。
この(1)～(3)のTDの子要素部分だけを抽出し、(*)の
DIVタグの真下に移動させるようなjquery文を作りたいのですが、
http://d.hatena.ne.jp/replication/20120113/1326382090
等の記事を参考に、

var cells, tblcell;
// テーブルタグを探して、１番目のテーブルを取得する
var rows = $("table")[0].rows;
// 列を１つずつ取り出す
$.each(rows, function(i) {
cells = rows[i].cells;
// 行を１つずつ取り出す
$.each(cells, function() {
// tdタグの値を書き換える
tblcell = $(this).detach();
console.log(tblcell);
// tdタグのスタイルシートを書き換える
$('div').after(tblcell);
});
});

このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。
そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、
中々うまいやり方がみつかりません・・・

なにか、よい方法はございませんでしょうか？

回答No.2

babu_baboo · ベストアンサー

なんでもかんでも jQuery をもちださなくても。
script 要素も移動する必要がありますか？というかそこに必要なのか？
テキストノードは適当に何かの要素で囲んでね。
（＊）の手前の要素には、id="piyo" を追加！
そのうち、insertAfter を使った回答が…

function i (e) {
　this.parentNode.insertBefore (e, this);
}

function hoge () {
　var c = document.querySelectorAll ('body > table:nth-of-type(1) td > *');
　var b = document.querySelector ('#piyo').nextElementSibling;

　Array.prototype.forEach.call (c, i, b);
}

hoge ();

お礼

なるほど勉強になります、ありがとうございます。

回答No.1

ORUKA1951

そもそもHTML根本的におかしいし・・・
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
の右上DATAでチェックしてみましたか？
単純に、スタイルシートで書き直したら？

お礼

こういう所もあるんですね。勉強になります。
ありがとうございました。