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

Question

由于我的项目结构，我必须在js中定义我的模态标记。为此，我写道：var modal_message = '<ul><li id="address"></li><li id="average"></li></ul>';但是，我需要从我的代码中传入这个html标记中的一些js变量。

它有点

$('#address').innerHTML = var1;
$('#average_sum').innerHTML = var2;

但这不起作用，因为只有在单击按钮后才定义模态。所以我想以<li>{{ var1 }}</li>的方式预先传递所有变量我应该怎样做才能实现呢？

Answer 1

这可以使用ES6 Template literals完成

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

Answer 2

尝试使用模板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>

Answer 3

您可以通过使用HTML内容创建临时元素来完成此操作。

使用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>

没有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>

---

如果HTML字符串中只有一个父标记，则无需创建虚拟元素，只需使用字符串即可。

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>