Как в JS вставить разметку HTML?

Рейтинг: 5Ответов: 2Опубликовано: 15.01.2015

Всем привет.

Подскажите, как в JS вставить HTML блок с содержимым?

Например:

<div class="ds">Текст текст</div><div class="sdf12">Текст текст</div>

<script type="text/javascript">
var as='<div class="ds">Текст текст</div><div class="sdf12">Текст текст</div>';

</script>

Так оно почему-то не работает, а как правильно, чтобы потом подключил этот файл и оно читало разметку?

javascript jquery ajax
Источник: Stack Overflow на русском

Ответы

▲ 3

Надо значение этой переменной as как-то вставить в нужном месте документа. Например, если там есть пустой <div> с известным id, то можно так (пример 1):

document.getElementById("mesto").innerHTML = as;

Или можно, например, в конец документа, или известного элемента, добавить свежесозданный <div> с вашим html (пример 2):

var div = document.createElement("DIV");
div.innerHTML = as;
document.getElementsByTagName('body')[0].appendChild(div);

jQuery облегчает эту же задачу. Те же два способа будут выглядеть по одной строке:

$("#mesto").html(as); // в элемент с id="mesto"
// или
$("body").append(as); // в конец документа, не оборачивая в доп. div

Если HTML много, в несколько строк, можно его обернуть в отдельный тег с id:

<script id="html-1" type="text/template">   // заметьте, что это НЕ javascript!
    <div class="ds">Текст текст</div>
    <div class="sdf12">Текст текст</div>
</script>

<script> // а это уже нормальный JavaScript
    var as = document.getElementById("html-1").innerHTML;
    // или то же с jQuery:
    var as = $("html-1").html();
    // а далее как всегда : )
    // ...
</script>