※ ChatGPTを利用し、要約された質問です（原文：div で既存の <pre> を囲む方）
Greasemonkeyで<div>タグで既存の<pre>を囲む方法
このQ&Aのポイント
Greasemonkeyを使用して、<pre>タグの表示/非表示を切り替えるスクリプトを作成しています。
参照したサイトに従い、<div>タグで<pre>タグを囲む方法を試していますが、うまく行っていません。
現在のgreasemonkeyコードに問題があり、目的の動作が実現できていないようです。助けが必要です。
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 の部分が動いていないと思っています。
宜しくお願いします。
お礼
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); 宜しくお願い致します。