如何仍然将数据从js传递到html中

Question

Due to the structure of my project I have to define my modal's markup in js. To do so I write: var modal_message = '<ul><li id="address"></li><li id="average"></li></ul>'; However, I need to pass inside this html markup some js variables from my code.

It's kind of $('#address').innerHTML = var1; $('#average_sum').innerHTML = var2; $('#address').innerHTML = var1; $('#average_sum').innerHTML = var2; But this doesnot work as the modal is defined only after clicking a button. So I wanna pre-pass all the variables in the way <li>{{ var1 }}</li> What should I do to achieve it?

Answer 1

You can do it by creating a temporary element with the HTML content.

Using JQuery :

 let modal_message = '<ul><li id="address"></li><li id="average"></li></ul>'; // create a dummy element with your html var $temp = $('<div/>', { html: modal_message }) let var1= 'test', var2 = 'test1'; // get elements and update html content $temp.find('#address ').html(var1); $temp.find('#average').html(var2); // now get the dummy element html content console.log($temp.html()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Without JQuery :

 let modal_message = '<ul><li id="address"></li><li id="average"></li></ul>'; // create a dummy dom element var $temp = document.createElement('div'); // set HTML content $temp.innerHTML = modal_message; let var1 = 'test', var2 = 'test1'; // get elements within dummy element and update content $temp.querySelector('#address ').innerHTML = var1; $temp.querySelector('#average').innerHTML = var2; // get final html content console.log($temp.innerHTML); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

---

In case there is only one parent tag in your HTML string then there is no need to create a dummy element instead just use the string.

 let modal_message = '<ul><li id="address"></li><li id="average"></li></ul>'; // create a jQuery element with your html var $temp = $(modal_message) let var1= 'test', var2 = 'test1'; // get elements and update html content $temp.find('#address ').html(var1); $temp.find('#average').html(var2); // now get the outerHTML property of current element console.log($temp.prop('outerHTML')); // or console.log($temp[0].outerHTML); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

这可以使用ES6模板文字来完成

var modal_message = `<ul><li id="address">${var1}</li><li id="average">${var2}</li></ul>`;

Answer 3

Try using template literals .

 var content = "Hello World!"; var template = `<p>${content}</p>`; $('#stuff').html(template); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="stuff"></div>