How to interpolate javascript into html within javascript

Question

I'm just trying to interpolate a variable into html that is within a javascript file. I thought it would be simple but i cant seem to find the correct way. From the code below, i want to interpolate the 'number' variable into the html, data_id. thanks.

        var  number = 1
var html = ['<input type="text" id="search_name_1" data_id= name class="form-control add-member-on-policy-search"/>',
        '<div class="ellipsis-overflow">'
        ].join('');

Answer 1

You can use a template string. Use the backtick ``` instead of a quote '. Then you can input variables into the string using the ${your variable} syntax:

var  number = 1
var html = [`<input type="text" id="search_name_1" data_id=${number} class="form-control add-member-on-policy-search"/>`,
        `<div class="ellipsis-overflow">`
        ].join('');