Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Теги html выводятся в виде строки (https://javascript.ru/forum/jquery/59013-tegi-html-vyvodyatsya-v-vide-stroki.html)

Иззет 22.10.2015 02:31
Теги html выводятся в виде строки
 
<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 строки)


Часовой пояс GMT +3, время: 12:40.