https://teratail.com/questions/12677の続きです。

その後JQUERYのcssメソッドを使い編集した所、JQUERYのcssメソッドは、要素を直接いじっているので、
他のページも変更されるといわれてしまいました。

下記が一部抜粋です。

＞＞＞＞
beforeメソッドで固定化されているため、
他のページを開いても同じテキストが表示されてしまいます。

また、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいかと思います。
それぞれのメソッドの違いについては下記のリファレンスサイト等を参考にご自身でお調べ下さいませ。
http://semooh.jp/jquery/api/manipulation/insertBefore/content/
http://semooh.jp/jquery/api/manipulation/before/content/

どのメソッドが固定かどうかという情報がなく、どれを使えるのかがわかりません。

結果からすると、前にいただいた回答は間違っていたということでしょうか？

・追加情報

＞JQUERYのcssメソッドは、

.css("background-color");などごく一般的なJQUERYでのCSS指定です。
他にcolor、font-sizeなども使いました。

要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのがよいと言われているのですが、
この二つのメソッドは、片方がDOM操作で片方はそうでない（固定されてしまう）という決定的な違いがあるようです。

ここの部分をどう思われますか？

DOM操作系のメソッド一覧があり、ここのメソッドであれば、動的サイトでも使えるという事でしたら、非常にわかりやすいのですが、
どこが信頼できるのか判断が難しいです。

下記のようなサイトは見つかるのですが、
例えば、下記のサイトなら、jQueryによるDOM操作をまとめてみたの中に、3. 要素の挿入(after, insertAfter, before, insertBefore)という記載があります。
ただし先方のメールには、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいとあります。

つまり、 before, insertBeforeは、DOM操作系かそうでないかの、違いがあるはずなのに、同じページ内で紹介されていて区別がつきません。

http://ruby-rails.hatenadiary.com/entry/20150331/1427809820#jquery-dom-after

・HTMLは、いわゆる一般的な会員制の大手サイトと同じです。
コンプライアンスがあるので、残念ながらここのサイトとは記載できませんが、例えばホトッペーパーやグルナビなど、沢山のお店が情報を登録し、店の情報だけが変わり骨組みは皆同じという形のサイトです。
デブツール上では、普通のHTMLに見えます。処理された結果しか見れないので当たり前かもしれませんが。

動的サイトの件で、再度質問した所下記の回答を頂きました。

下記回答

ここでおっしゃる「直接HTMLを変更できない」というのは、動的に変更される要素をreplaceWithやtextなどで変更したい画像や文言にできないということでよろしいでしょうか？
上記の認識でよろしければ、この変更は不可になりますので、要素の位置を移動したり、レイアウトを変更したりなどの編集のみにしてください。

もし、要素の移動などを行いたいという場合は例えば、

//動的箇所をid="test2"の要素の上に移動させたい。

<div id="test1"> <div>この内容が動的箇所です。</div> </div> <div id="test2"></div>

//id="test1"の中にあるdivをid="test2"の要素の上に移動する。
$("#test1 > div").insertBefore("#test2");

//動的箇所の内容を固定化することなく、id="test2"の要素の上に移動することができる。

<div id="test1"></div> <div>この内容が動的箇所です。</div> <div id="test2"></div> ===== その他にも ===== //動的箇所をid="test2"の要素の中に移動させたい。 <div id="test1"> <div>この内容が動的箇所です。</div> </div> <div id="test2"></div>

//id="test1"の中にあるdivをid="test2"の要素の中に移動する。
$("#test1 > div").prependTo("#test2");

//動的箇所の内容を固定化することなく、id="test2"の要素の中に移動することができる。

<div id="test1"></div> <div id="test2"> <div>この内容が動的箇所です。</div> </div> ===== 上記では、insertBefoerとprependToを参考にご案内致しましたが、他にもinsertAfterとappendToなど同じような処理でも少し異なる処理を行うメソッドもございます。

takutok

2015/07/23 04:34

要素をbeforeで固定するというのがよくわからないです。 > JQUERYのcssメソッドは、要素を直接いじっているので、他のページも変更されるといわれてしまいました。というのは具体的にどのようなHTMLとJavaScriptだったのでしょうか。やりたいことをHTMLを交えて具体的に質問していただけると回答しやすいです。

退会済みユーザー

2015/07/23 06:35

＞JQUERYのcssメソッドは、 .css("background-color");などごく一般的なJQUERYでのCSS指定です。他にcolor、font-sizeなども使いました。要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのがよいと言われているのですが、この二つのメソッドは、片方がDOM操作で片方はそうでない（固定されてしまう）という決定的な違いがあるようです。ここの部分をどう思われますか？ DOM操作系のメソッド一覧があり、ここのメソッドであれば、動的サイトでも使えるという事でしたら、非常にわかりやすいのですが、どこが信頼できるのか判断が難しいです。下記のようなサイトは見つかるのですが、例えば、下記のサイトなら、jQueryによるDOM操作をまとめてみたの中に、3. 要素の挿入(after, insertAfter, before, insertBefore)という記載があります。ただし先方のメールには、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいとあります。つまり、 before, insertBeforeは、DOM操作系かそうでないかの、違いがあるはずなのに、同じページ内で紹介されていて区別がつきません。 http://ruby-rails.hatenadiary.com/entry/20150331/1427809820#jquery-dom-after

行動規範の内容に同意します

回答1件

質問の回答ありがとうございます。
before も insertBefore もDOMの挿入をするDOMを操作するメソッドです。違いはありません。

で思ったのですが、 before というのはjQueryのメソッドでは無く、 CSSに記述する before と勘違いされているのではないでしょうか？
http://www.htmq.com/selector/before.shtml

投稿2015/07/24 07:17

takutok

総合スコア392

退会済みユーザー

2015/07/24 07:47

両方とも、固定させることは無い、メソッドなのですね。動的サイトで使っても他のページにも影響が出ることが無いメソッドなのですね。 CSSの擬似要素と間違えたということはさすがにありません。両方とも間違いなくｊQueryのメソッドです。先方が言うにはこの二つのメソッドは、決定的に違うそうです。

退会済みユーザー

2015/07/24 07:49

お忙しい中ご回答ありがとうございます。下記のコメントを見ていただくと、CSSの事を言っていない事がわかると思います。＞＞＞それぞれのメソッドの違いについては下記のリファレンスサイト等を参考にご自身でお調べ下さいませ。 http://semooh.jp/jquery/api/manipulation/insertBefore/content/ http://semooh.jp/jquery/api/manipulation/before/content/

kiri

2015/07/24 08:01

横から失礼いたします。 takutokさんが仰っているように違いはないと思います。下記サイトにもその旨書かれています。 http://js.studio-kingdom.com/jquery/manipulation/insert_before javascriptはあくまでもクライアント側なので、ajaxで通信が発生して内部でCSSの値の書き換えが行われない限り、他のページに影響が出るというのは考えられません。

退会済みユーザー

2015/07/31 05:31

ありがとうございます。 ajaxを使わない限りJSは、HTMLを読み込んだ後クライアントサイドで実行されるので、他のページに影響を与える事は理論上ありえないということで、よろしいでしょうか？

退会済みユーザー

2015/07/31 05:40

ただし先方のメールには、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動されるのが宜しいとあります。どうもメソッドによって違いがあるといっているようです。私の知識不足でこのあたりをどう質問していけば、どのメソッドであればOKなのか確認できるのですが、もしよろしければこのように質問してみてはと教えていただけませんでしょうか？また始めの質問に返答の追記をしました。

行動規範の内容に同意します