div で既存の <pre> を囲む方

質問

Greasemonkey で、<pre> 部分の表示/非表示を切り替えるスクリプトを作ろうとしています。後述のサイトを参照しまして、以下のような実現方法を試す事にしましたが、
div で既存の <pre> を囲む所でつまづいています。

TargetId で対象を探して、その child element である <pre> を
<div id="disp"> で囲んで、ボタンクリックで表示/非表示を切り替える。

・参照したサイト
複数のタグをDIVタグで囲みたい
http://okwave.jp/qa/q7506227.html

表示/非表示の切り替え
http://www.pori2.net/js/DOM/7.html

下記が実行対象のページの HTML 抜粋と、現在のコード内容です。

対象ページの一部
=============
<tr>
<td id="TargetId" class="sorting_1">
<h6 class="Title"> </h6>
<pre> 文章 </pre>
</td>
</tr>

現在の greasemonkey code
======================
var targetObj, wrap;
targetObj = document.getElementById('TargetId');
wrap = $('<div />');
targetObj.append(wrap.append(targetObj.children('pre')));

firebug で debug してみたところ、変数 wrap にはオブジェクト div が入っており、
targetObj には目的の TargetId が入っています。
そのため、append の部分が動いていないと思っています。

宜しくお願いします。

回答No.1

Ogre7077 · ベストアンサー

targetObj は目的の HTMLElement オブジェクトなのでしょうが、
jQuery のオブジェクトではないため、children メソッドが
http://js.studio-kingdom.com/jquery/traversing/children
ではなく
https://developer.mozilla.org/ja/docs/Web/API/ParentNode.children
とみなされています

誤: targetObj = document.getElementById('TargetId');
正: targetObj = $(document.getElementById('TargetId'));
正: targetObj = $('#TargetId');

お礼

range.surroundContents() にて本投稿で質問させていただいた部分は実現する事が出来ました。
最終的な機能を実装するには至っていませんが、先に進む事ができましたので本質問は以上とさせて頂きます。

ご回答有り難うございました。

補足

ご連絡有り難うございます。

わたしが JQuery の事を分かっておらず、使用するつもりの無かった JQuery を
使用したコードを参照していた様です。

Greasemonkey では通常は JQuery は使用できないようなので、javascript の DOM で
実現する方法がありましたら、ご教示いただけないでしょうか。

その後、以下のサイトを参照して、surroundContens で実現できないか試しています。
https://developer.mozilla.org/en-US/docs/Web/API/range.surroundContents

現在のコード
===========

var range = document.createRange();
var newNode = document.createElement('div');

range.selectNode(document.getElementById('TargetId').item(0));
range.surroundContents(newNode);

宜しくお願い致します。