在脚本外面写html内容

Question

I have below code which will fetch the text from JSON & onclick text, display popup box in page.... Now I need to give options to change font-family, font color etc....

I need to add lot of HTML code in the place of Content ....

Is there any way to keep the "content" code in HTML & separate it from script?

JSON :

{        
          "font" : "Arian",
          "x" : 201,
          "y" : 461,          
          "type" : "text",          
          "text" : "Good Food",          
          "name" : "edit_good_1"
}

script

const lightId = 'light' + layer.name
        const lightIdString = '#' + lightId
        $('.container').append(
            '<a id ="' + layer.name + '" onclick="openPopUp(' + lightId + ')"' +
            '<div class="txtContainer" contenteditable="true" ' +
            'style="' +
            'left: ' + layer.x + 'px; ' +
            'top: ' + layer.y + 'px; ' +            
            '">' + layer.text + '</div></a>' +
            '<div id="light' + layer.name + '" class="white_content" style="' +            
            'top: ' + layer.y + 'px; ' + '"> content <a href="javascript:void(0)" ' +
            'onclick="closePopUp(' + lightId + ')">Close</a></div> <div>'
        );
        document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'

codepen : https://codepen.io/kidsdial/pen/OGbGwN

fiddle : https://jsfiddle.net/kidsdial1/z6eyq4j3/

Answer 1

You can make a separate html file template, and add there some variables, like:

<pre>
<div id="{layer.name}">
<a href="{link}">{link.name}</a>
</div>
....
</pre>

And in the script you can replace your variables with data:

$.get("/ulrOfYourHtmlTemplate").done(function(template) {
   $('.container').append(template.replace("{layer.name}",layer.name).replace("{link}",link).replace("{link.name}", link.name))
})