Вход

Просмотр полной версии : Теги html выводятся в виде строки

Иззет
22.10.2015, 02:31
<div class="visible"></div>
<div class='content'>
<h1>Заголовок1</h1>
<p>Текст1</p>
<a href='#'>ссылка1</a>
</div>
<div class='content'>
<h1>Заголовок2</h1>
<p>Текст2</p>
<a href='#'>ссылка2</a>
</div>

Предположим, нужно взять содержимое дивов .content и выводить через див .visible содержимое случайного дива .content

var content_arr = [];
$(".content").each(function() {
var elem = $(this).html();
content_arr.push(elem);
$(this).text("");
}).hide();
n = Math.round(Math.random()*(content_arr.length - 1));
$('.visible').text(content_arr[n]).show();

В итоге текст в .visible выводится в виде строки вместе с тегами. Как реализовать так, чтобы в .visible нормально выводился html код?
рони
22.10.2015, 02:46
Иззет,
:blink:
text -> html
Иззет
22.10.2015, 02:52
Да, очень глупая ошибка, как это я не углядел) спасибо, что раскрыли глаза)
рони
22.10.2015, 03:00
Иззет,
вариант...
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.visible {
display: none;

}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var content_arr = [], n;
$(".content").each(function() {
content_arr.push(this.innerHTML);
}).remove();
n = Math.floor(Math.random()*content_arr.length);
$('.visible').html(content_arr[n]).show();
});
</script>
</head>

<body>
<div class="visible"></div>
<div class='content'>
<h1>Заголовок1</h1>
<p>Текст1</p>
<a href='#'>ссылка1</a>
</div>
<div class='content'>
<h1>Заголовок2</h1>
<p>Текст2</p>
<a href='#'>ссылка2</a>
</div>



</body>

</html>
Иззет
22.10.2015, 10:29
Спасибо, вариант намного оптимальней моего.
рони
22.10.2015, 11:43
Иззет,
ещё вариант :)
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.visible {
display: none;

}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var content_arr = $.makeArray($(".content").remove()),
n = Math.floor(Math.random()*content_arr.length);
$('.visible').html(content_arr[n].innerHTML).show();
});
</script>
</head>

<body>
<div class="visible"></div>
<div class='content'>
<h1>Заголовок1</h1>
<p>Текст1</p>
<a href='#'>ссылка1</a>
</div>
<div class='content'>
<h1>Заголовок2</h1>
<p>Текст2</p>
<a href='#'>ссылка2</a>
</div>



</body>

</html>
Иззет
22.10.2015, 14:39
Спасибо за помощь. Не знал что всю мою писанину можно уместить в 3 строки)