Jsファイルからhtml要素をhtmlファイルに出力させたいです

Question

###Jsファイルからhtml要素を出力したいです
bodyの一番最後にjsから下記要素をhtmlへ出力させたいです。

  <div id="pop">
    <div class="wrap">
      <div class="block">
          <p class="icon"><img src="../img/pop_icon.png" alt=""></p>
          <p class="ttl">
            タイトルタイトル          
      </p>
          <p class="txt">
            テキストテキストテキスト<br>
            テキストテキストテキスト
          </p>
          <ul class="">
            <li id="close">文字</li>
            <li id="open"文字</li>
          </ul>
      </div>
    </div>
  </div>

上記のhtml要素をJsファイルからhtmlへ出力したいのですが、innerHTMLに上手く値を埋め込めないです。
この場合はもっと一行など細かく指定したほうがよろしいでしょうか？
jsから上手く出力させる方法を教えて頂きたいです。

###該当のソースコード

  function appendSeacrhList(){
       var element = document.createElement('div'); 
      	 element.id = "test"; 
      	 element.innerHTML = "
         '<div id="pop">'+
           '<div class="wrap">'+
               '<div class="block">'+
                  '<p class="icon"><img src="../img/pop_icon.png" alt=""></p>'+
                  '<p class="ttl">'+
                    'タイトルタイトルタイトルタイトル'+
                  '</p>'+
                  '<p class="txt">'+
                    'テキストテキストテキストテキスト<br>'+
                    'テキストテキストテキストテキスト。'+
                  '</p>'+
                  '<ul class="">'+
                    '<li id="close">テキスト</li>'+
                    '<li id="open">テキストテキストテキストテキスト</li>'+
                  '</ul>'+
               '</div>'+
             '</div>'+
          '</div>'
         "; 
         document.getElementsByTagName('body')[0].appendChild(element); 
   };
    appendSeacrhList();

Answer 1

単純に、一番外側の""(ダブルクオート)が原因なのだと思います。

+と改行で区切っている文字列をつなげると何が原因かがわかりやすくなりますが、簡単のためごく一部だけ抜粋すると、

element.innerHTML = "'<div id="pop">...</div>'"

のような状態になっていて、"pop"等をダブルクオートで囲っているつもりが外側に出てしまっています。これが原因でSyntaxErrorを引き起こしてしまうようです。

// 修正後
function appendSeacrhList(){
       var element = document.createElement('div'); 
           element.id = "test"; 
           element.innerHTML = // " <= 不要
         '<div id="pop">'+
           '<div class="wrap">'+
               '<div class="block">'+
                  '<p class="icon"><img src="../img/pop_icon.png" alt=""></p>'+
                  '<p class="ttl">'+
                    'タイトルタイトルタイトルタイトル'+
                  '</p>'+
                  '<p class="txt">'+
                    'テキストテキストテキストテキスト<br>'+
                    'テキストテキストテキストテキスト。'+
                  '</p>'+
                  '<ul class="">'+
                    '<li id="close">テキスト</li>'+
                    '<li id="open">テキストテキストテキストテキスト</li>'+
                  '</ul>'+
               '</div>'+
             '</div>'+
          '</div>';
         // "; <= 不要 
         document.getElementsByTagName('body')[0].appendChild(element); 
   };
    appendSeacrhList();

Comments

[OOO_777]

続けてのご回答ありがとうございます。

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

Answer 2

element.innerHTML = "

の箇所がおかしいですね
ダブルクォーテーションじゃなくてシングルクォーテーションx2ではないのですか？

element.innerHTML = ''

モダンなブラウザならバッククーテーションをつかってヒアドキュメントを利用することも可能です。

それとbodyが確定してからの処理になるのでappendSeacrhList()はload後に実行して下さい

window.onload=function(){
appendSeacrhList();
}

Comments

[OOO_777]

ご回答ありがとうございます。
無事にできました。
load後に実行する　←　こちらも勉強になりました。

Answer 3

//           element.innerHTML = "
           element.innerHTML = 

// 略

//         "; 
         ;

Comments

[kei344]

To: マイナス評価の方
https://jsfiddle.net/zu67jgaz/

[x_x]

動作確認のうえ投稿したのですが…jsfiddle.netは信頼できるのですかね？

[kei344]

To: x_xさん
> jsfiddle.netは信頼できるのですか
「動かせる状態のコードを表示する」という機能においては他のサービスとさほど変わらないと思います。