javascriptファイルにhtmlを埋め込む

Question

これは、モーダを閉じて開くためのスクリプトです。クリック時にイベントをトリガするときに呼び出されます。そして、私は画面上でそれをレンダリングするためにいくつかのHTMLを持っています。

<!-- Script for calling the modal --> 
 
<script> 
 
    $("body").delegate(".share.dash-button__feed", "click", function() { 
 

 
     var thisID = $(this).attr('data-thdkls'); 
 
     $.post("/nodelike/nodelikes/dash_share/", { 
 
       data: { 
 
        postid: thisID, 
 
       } 
 
      }, 
 
       /* The functionality when the "share" button is clicked */ 
 
      function() { 
 
       //Load the modal 
 
       var modal = document.getElementById('share-post'); 
 
       //Load the closing button 
 
       var span = document.getElementsByClassName("close")[0]; 
 
       //Hide the modal if the "X" button is clicked 
 
       span.onclick = function() { 
 
        modal.style.display = "none"; 
 
       } 
 
       //Load and close the modal 
 
       if (modal.style.display === 'none') { 
 
        modal.style.display = 'block'; 
 
       } else { 
 
        modal.style.display = 'none'; 
 
       } 
 
       //Close the modal if you click outside the modal 
 
       window.onclick = function (event) { 
 
        if (event.target == modal) { 
 
         modal.style.display = "none"; 
 
        } 
 
       } 
 

 
      } 
 
     ); 
 
    }); 
 
</script>

私は、JSファイルにHTMLとCSSのPICEを含めたいです。 正確に行う方法がわかりません。

<!-- The HTML Modal for sharing a post by a user --> 
 
<div id="share-post" class="modal" style="display: none;"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
     <span class="close">&times;</span> 
 
     <p>Some random text....</p> 
 
    </div> 
 
</div>

Answer 1

使用jQueryのセレクタを使用してIDを通してそれを選択することで、HTMLを取得する：あなたが含まれている変数html_contentを使用することができます

var html_content = $('#share-post')[0]; 
 
console.log(html_content);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="share-post" class="modal" style="display: none;"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
     <span class="close">&times;</span> 
 
     <p>Some random text....</p> 
 
    </div> 
 
</div>

をHTML。この変数はモーダル内で使用できます。