Greasemonkey で、<pre> 部分の表示/非表示を切り替えるスクリプトを作ろうとしています。後述のサイトを参照しまして、以下のような実現方法を試す事にしましたが、
div で既存の <pre> を囲む所でつまづいています。
TargetId で対象を探して、その child element である <pre> を
<div id="disp"> で囲んで、ボタンクリックで表示/非表示を切り替える。
・参照したサイト
複数のタグをDIVタグで囲みたい
http://oshiete.goo.ne.jp/qa/7506227.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ベストアンサー
- 回答日時:
targetObj は目的の HTMLElement オブジェクトなのでしょうが、
jQuery のオブジェクトではないため、children メソッドが
http://js.studio-kingdom.com/jquery/traversing/c …
ではなく
https://developer.mozilla.org/ja/docs/Web/API/Pa …
とみなされています
誤: targetObj = document.getElementById('TargetId');
正: targetObj = $(document.getElementById('TargetId'));
正: targetObj = $('#TargetId');
この回答への補足
ご連絡有り難うございます。
わたしが JQuery の事を分かっておらず、使用するつもりの無かった JQuery を
使用したコードを参照していた様です。
Greasemonkey では通常は JQuery は使用できないようなので、javascript の DOM で
実現する方法がありましたら、ご教示いただけないでしょうか。
その後、以下のサイトを参照して、surroundContens で実現できないか試しています。
https://developer.mozilla.org/en-US/docs/Web/API …
現在のコード
===========
var range = document.createRange();
var newNode = document.createElement('div');
range.selectNode(document.getElementById('TargetId').item(0));
range.surroundContents(newNode);
宜しくお願い致します。
range.surroundContents() にて本投稿で質問させていただいた部分は実現する事が出来ました。
最終的な機能を実装するには至っていませんが、先に進む事ができましたので本質問は以上とさせて頂きます。
ご回答有り難うございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javaScriptでグローバル変数に...
-
if(1){...}とはどういうことで...
-
デザイン時のVisible=Falseは実...
-
PHP処理実行後のページの遷移に...
-
JavaScriptで ブラウザの閉じる...
-
フォルダを自動で開く
-
ブラウザからエクセルを開く方法
-
htmlのfileタグに自動で値を入...
-
JSPの処理の途中で、JavaScript...
-
Windows Form のMSChartで、グ...
-
ページ遷移時にアコーディオン...
-
特定の文字でエラー
-
gas 全角数字を半角数字に変換
-
jQuery ui Datepicker 明日以降...
-
innerHTMLなどの反映タイミング
-
画像の上にマウスをもってくる...
-
VB.NET2003 テキストボックスに...
-
PDFフォームで条件つき金額を表...
-
ASP(VBS) ←→ JavaScript の変数...
-
C#でボタン名を変更しても動く
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Webページ中の javascript をVB...
-
ローカルのレジストリを読みたい
-
画面間でのJavaScrip...
-
フォルダ内のファイル名を取得...
-
エクセル2010のvbaについて
-
javaScriptでグローバル変数に...
-
event.srcElementの動的設定
-
JavaScriptでオブジェクトを識...
-
正規表現内に変数を使用する方法
-
ASP.NETでURLにマッピングされ...
-
javascript 名前空間?
-
文字を移動させその位置を表示...
-
JavaScript 日数計算の関数で演...
-
Shell.ApplicationでのIEオブ...
-
オライリーのプログラミングPHP...
-
イベントevt?evt.target:event....
-
タブブラウザで focus() を実...
-
jquery か javascript で json ...
-
クラス デフォルトプロパティの...
-
jQueryの仕組みについて質問です
おすすめ情報