Javascript append() 変数内のHTMLコードをうまく表示する方法

Question

<div id = "all">
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
</div>
<div id = "contents">hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</div>

var all = document.getElementById("all").outerHTML;
var contents= document.getElementById("contents");
contents.append(all);

仕事の都合上、HTMLは書き替えたくないです。

contents(id)の下に、allの内容をもう一度表示したいです。
insert​AdjacentHTML()で成功しているのですが、IEで表示がされないため、別の方法を試しています。(IE11サポートされていない？)

このままブラウザで確認すると、htmlのソースが表示されてしまいます。ブラウザ上にタグも全部出力されてしまいます。

<div id = "all">
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
</div>

ソースではなく、ちゃんと(デバック？後を)出力するにはどのように変換したらよろしいでしょうか？

よろしくお願いいたします。

Comments

[m.ts10806]

タイトルになにも要件が含まれていません。起きた問題ややりたいことなど質問内容を要約したものにしてください。
またタグにある情報はタイトルに含まなくても良いです

[m.ts10806]

また、再現確認が可能なようにhtmlも含めて全体の流れがわかるコードをご提示ください

[m.ts10806]

outerHTMLだと<div id = "all">も取得できてしまって、id=allが画面内に複数存在してしまう問題が起きますが、そこはどうお考えですか？

Answer 1

IE4 から .insert​Adjacent​HTML() をサポートしています。ないのは .append() です。
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

var all = document.getElementById("all").innerHTML;
var contents= document.getElementById("contents");
contents.insertAdjacentHTML('afterbegin', all);

Answer 2

なぜouterHTMLを使うのか、理解に苦しみますが、jQuery#append の影響なのでしょうか。

1. cloneNode(true) で#allを複製
2. id属性値を重複しない値に書き換える
3. appendChild()

基本的にノード単位で扱う方が問題が少なくて良いと考えます。

Re: SHIVA さん

Comments

[SHIVA]

回答ありがとうございます。
クローンの作成に成功し、クロームでは表示されましたが、
IEでは表示されませんでした。。やっぱり厳しいのでしょうか

[SHIVA]

outerHTMLを使っているのは、ただの知識不足です。すみません。

[think49]

紹介したAPIにIEで使用できないものはありません。
質問文に書いたコードたけで検証し直す事をお勧めします。

Answer 3

そもそもappend()もIEでサポートされてないように見受けられます。
自身のIE11でも動きませんでした（エラーも出ない）

outerHtmlだと<div id="all">も取れてしまってidの重複問題が起きるのでinnerHTMLで中身だけとって、あとはdiv作ってその中にセットしたものをappendChild()するしかないかなと。

var contents= document.getElementById("contents");
var div = document.createElement('div');
div.innerHTML = document.getElementById("all").innerHTML;
contents.appendChild(div);

Comments

[SHIVA]

回答ありがとうございます。
回答のほう方法で、クロームでは成功いたしました
しかし、IEでは表示されていません　やっぱり厳しいのでしょうか。

[m.ts10806]

おかしいですね。IE11確認済みのコードです。

[Y.H.]

> SHIVA
ドキュメントモードがIE11以外のモード（IE7やIE8）になってたりしませんか？
互換表示設定やEnterpriseMode設定etc...で。

Answer 4

console.log(all);

ってことですか？

sample

• allをcontentsの中に流し込むならこう

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var all = document.querySelector("#all");
  var contents= document.querySelector("#contents");
  contents.appendChild(all);
});
</script>
<div id = "all">
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
</div>
<div id = "contents">fugafugafugafugafugafugafugafugafugafugafugafugafugafuga</div>

• allをcontentsの後ろに移動するならこう

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var all = document.querySelector("#all");
  var contents= document.querySelector("#contents");
  contents.parentNode.insertBefore(all,contents.nextSibling);
});
</script>
<div id = "all">
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
  <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
</div>
<div id = "contents">fugafugafugafugafugafugafugafugafugafugafugafugafugafuga</div>

Comments

[yambejp]

sampleつけておきました

Answer 5

たくさんのご回答ありがとうございます。

申し訳ございません。
仕事の関係上、コードを丸乗せできないので、情報が不足していました。

解決法。コードにremove()が使用させていてエラーが出ていました。
わざわざIEの開発ツールをReg変更し、onにしました。

結果、append()は使用できません。.insert​Adjacent​HTML()は使えます。(IE)

以上です。たくさんのご回答ありがとうございました。勉強になりました。