Question

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

有点$('#address').innerHTML = var1; $('#average_sum').innerHTML = var2; 但这不起作用，因为仅在单击按钮后才定义模态。所以我想以<li>{{ var1 }}</li>的方式预传递所有变量我应该怎么做才能实现它？

Answer 1

您可以通过使用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>

Answer 2

可以使用ES6 Template literals

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

Answer 3

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

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

3 个答案: