Embed html into javascript file

Question

This is the script for closing and opening the moda. It is called when I trigger the event on click. And I want to have some html in order to render that on the screen.

 <!-- 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> 

I want to include a pice of html and css into a js file. I am not sure exactly how to do it.

 <!-- 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

Use jQuery and get the html by selecting it through using and ID selector:

 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> 

you can use the variable html_content which contains the HTML. You can use this variable within your modal.