jQuery loadで要素差し替え

質問

回答者の皆様にはいつも大変にお世話になっております。

jQueryのload命令で別のhtmlを読み、#content要素を差し替えたく思っています。
読み込むhtmlにも同idの#content要素があります。

$("#content").load("contents1.html #content");

ところが、これを行うと、どうも、
<div id="content">
　<div id="content">新しく読み込んだ内容</div>
元々の内容</div>
のように２重に生成されてるようなのです。
コード例は簡略化してありますが、実際にはJavaScriptコードなどが入ったややこしいもので、CSSも、Javascriptも複雑怪奇で手が出ません。
また、各htmlは事情があり、内容を編集できません（外部でjava生成）。
どうやって読みこんだら要素差し替えられますでしょうか？

お助けを！！

回答No.3

fujillin · ベストアンサー

ANo2です。

スクリプトの追加・修正が可能なものとして、回答いたします。
スクリプトの追加や編集にどれだけの自由度が残されているのか（あるいは制約があるのか）、ご質問文からは明確には読取れませんので、そのあたりは工夫していただくとして…

＞両方とも同じidだし。。仮置きできるエリアもないし。。ずっと困っています
はい、同じidなので一時的にしろ文法違反を作るのも気持ち悪いですよね。
まぁ、
　<div id="content"><div id="content">～～</div></div>
となっている場合でも、jqueryでは読み取ってくれる可能性は高いですが、やらないに越したことは無いと思います。

それなので、仮の要素に一旦入れればよろしいでしょう。
仮の要素が無ければ、一時的に作ってしまえば良いということで…

var div = document.createElement("div");
var content = $("#content");
$(div).load("contents1.html #content", function(){
content.html($("#content", div).html());
});

replaceAll()でなく、html()で記述していますがほとんど同じことかと思います。
innerHTMLを利用しても同様ですね。

上記をそのまま記述すると、変数div、contentを新しく作成しているため、他の部分で使用しているかも知れない「変数div」等とコンフリクトする可能性をゼロにはできません。それを避ける意味からも（文字数が許すのであれば）匿名関数で処理をするなどにしておく方が安全かと思います。
（他の部分が複雑で理解不能とのことですので、なおさらですね）

ちょとひねって
　$("#content").load("contents1.html #content>*");
とすれば一発でいけてしまうようですが、#content直下にテキストなどがある場合に全ての環境で確実に取得できるのかどうかが私にはわかりません。（大丈夫そうな気はしますが、ちゃんと調べていませんので）

普通に、ajaxで取得して置き換える際にはloadではなく、getやajaxを用いることになると思いますが、スクリプトの記述はもう少し長くなるかと思います。（研究してみてください）

お礼

fujillinさん、何度もありがとうございます。
なるほど～　仮のdivを作ってそこに読込み、完了後にターゲットに内容を差し替えるわけですね！
やってみたら見事にうまくいきました。

今回は$load()で読みだす相手、読みだし元ともcgiがからんでいて、コードを書いているのが協力会社だったりして大事だったものですから、なんとかjQueryサイドで吸収しようとしてこのようなことになりました。
速い話が、読み出し先の一番外側の<div>を外してもらえればよかったのですが、いろいろと大変で。。

大変勉強になりました。ありがとうございました。

回答No.2

fujillin

横からですが…

質問者：「自動車でアメリカまで行くのですが、海に出ると沈んでしまいます。お助けを。」
回答者：「車は空を飛んだり海を進むことができません。フェリーなどを使えばよいでしょう。」
質問者：「内陸地なのでフェリーはここまでこれないのです。質問の意図を理解して欲しい。」

というやりとりのように見えます。

ご質問文からは読取れませんが、50文字以上は記述できないとか、loadメソッド以外は用いてはならないという制約でもあるのでしょうか？

ANo1様の回答は、『load()はご質問のような処理をするメソッドではないので、replaceAll()などを利用して置き換えることが必要ではないか』といっているのではないのでしょうか。（←フェリーみたいなもの）。
別に、この方法が水陸両用とはおっしゃってませんし、さらには、（質問者様の知識内容が不明なので）念のために必要な情報のありかも提供なさっています。

＞jQuery開発者ならだれでも知っている有名なリファレンスサイトです。
＞とっくに調べています。
であるならばなおさらのこと、No１様の回答で充分だと思われます。
（そのサイトには、本家へのリンクもあるようですし）
回答の趣旨を理解してあげることも必要なのではないでしょうか？

さて、仮にご質問が、
＞$("#content").load("contents1.html #content");
を一切変えずになんとかしたいという趣旨だとするなら、一時的にkoadを上書きしておいて元に戻すといったことをすれば可能かとも思いますが、わざわざ面倒なことをする必要性もみあたりませんし、いずれにしろ、どこかにスクリプトを書かなければならないことに変わりありません。

上記はお行儀が悪すぎるので、やるにしてもせめて、
　$("#content").load2("contents1.html #content");
とでもして、事前にload2をextendしておく方がよほど安全だし、ましな考え方でしょう。
（一文字追加になってしまいますけれど）

しかし、ご質問文を読む限りでは、そんな手間をかける必要があるとも思えません。
ANo1様の回答のように、読込んだ内容から必要な部分を抜き出して差し換えるのが素直な方法だと思います。
どうしてもｌoad()を使いたいのであれば、少々無駄にはなりますが、一旦仮の要素に受けてから、同様に抜き出して差し替える方法でも同じ結果を得られるはずです。

＞とっくに調べています。
あ・・、これも「釈迦に説法」でしたね。　大変、失礼いたしました。

補足

fujillinさま

ご回答ありがとうございます。
たしかに自分の捕捉を読み直すと、回答者さまに失礼でした。反省いたします。
今回は、読込先・読込要素ともCGI生成で、仕事的な事情で変更することが大変で、自分的に舞い上がってしまい、「そんな方法なら知ってるわ」と短絡してしまいました。
で、おっしゃっているような、「loadでいったん読み込み」「replaceAll」で差し替えるという方法論なのですが、例えば、

<div id="content">ここに読み込む</div>
というエリアを、
<div id="content">読み込む対象（長く複雑なhtmlとjavascript）</div>
という内容のcontents1.htmlで差し替えるにはどうしたら良いのでしょう。。
（contents1.htmlはこの<div>以下だけを含んだ部分htmlのエレメントファイルです）

両方とも同じidだし。。仮置きできるエリアもないし。。ずっと困っています。

回答No.1

kool_noah

.load()はHTMLを読み込んで、DOMに挿入するだけでは？
置き換えするなら.replaceAll()とかinnerHTML()とかじゃないですかね。

http://semooh.jp/jquery/api/manipulation/replaceAll/selector/
ここで調べてみてはいかがでしょう。

補足

回答ありがとうございます。
ですが、

replaceAllも、innerHTMLも、外部ファイルの読み込みには使えませんよ。
リテラルテキストの差し替えなら質問はしません。
あと、ご参考のサイトも、jQuery開発者ならだれでも知っている有名なリファレンスサイトです。
とっくに調べています。

質問の趣旨をご理解ください。