Блог

Главная - Вопросы по программированию - Как передать данные из js в html все еще в js

Как передать данные из js в html все еще в js

#javascript #html

#javascript #HTML

Вопрос:

Из-за структуры моего проекта я должен определить разметку моего модала в 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> Что я должен сделать, чтобы достичь этого?

Ответ №1:

Это можно сделать, используя литералы шаблона ES6

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

Ответ №2:

Попробуйте использовать литералы шаблона. 

 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>

Ответ №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>