Как я могу вставить HTML-код внутри переменной JavaScript?

Question

Итак, я извлекаю информацию из календаря Google, и мне нужно разделить полученные переменные, чтобы я мог отображать их в разных элементах div. Так что мне нужно сделать что-то вроде этого

var divMonth = '<div id ="rawr">';
var divMonthClose = '</div>';

dateString =  divMonth + monthName + divMonthClose + ' | ' + parseInt(dateMonth, 10);

Однако, как вы понимаете, результат будет ...

"<div id ="rawr">December</div> | 8"

На самом деле он не интерпретирует html и не создает слой div. Итак, мой вопрос .. Как я могу вставить HTML-код в переменной, чтобы он на самом деле работает как HTML? Есть ли функция, которую я пропускаю или это вообще возможно?

Заранее благодарим за любую помощь или идеи, которые могут у вас возникнуть!

Answer 1

Вы пометили этот пост как jquery, так что вы можете сделать что-то вроде этого:

var monthName = 'December';
var dateMonth = 31;

var ele = $('<div></div>')
    .attr('id', 'rawr')
    .html(monthName + ' | '  + parseInt(dateMonth, 10));
$('#container').append(ele);

Answer 2

используйте функцию createElement:

var elm = document.createElement('div');
elm.setAttribute('id', 'rawr');
elm.innerHTML = THE_CODE_AND_TEXT_YOU_NEED_INSIDE_THE_DIV;

, когда вы хотите добавить его в документ:

$('MYELEMENT').append(elm);

, где MYELEMENT (очевидно) элемент, к которому вы хотите добавить новыйdiv to.

Answer 3

Если вы хотите это без jQuery, то что-то вроде этого будет работать:

var divMonth = document.createElement('div');
divMonth.id = 'rawr';

divMonth.innerHTML = monthName + ' | ' + parseInt(dateMonth, 10);

document.getElementById("where_you_want_to_put_this").appendChild(divMonth);

Answer 4

Если вы хотите, чтобы html-структура была похожа на:

<div id="wrapper">
 ...
  <div id="date">
   <div id="rawr">
   </div>
  </div>
</div>

, вы можете создать html-код и добавить содержимое одной строкой:

$("#wrapper").append('<div id="date"><div id="rawr">'+monthName+'</div> | '+parseInt(dateMonth, 10)+'</div>');

Answer 5

Я думаю, что вам лучше отделить ваш дисплей от вашей логики и обновить div или span (если вы хотите отображать inline), используя JQuery.Что-то вроде следующего.

<div id='rawr'> <span id='updateme'></span> </div>

<script> $("#updateme").html(monthName); </script>