Вывести с помощью js информацию

293
12 февраля 2017, 13:11

Здравствуйте!

Интересует такой вопрос: Как с помощью js можно вывести любую информацию, но чтобы эта информация летела из JS, а не просто показать, например, div у которого был класс display:none;? Я, например, вывожу, как раз таким способом:

<input type="text" class="input-number">
<p style="display:none;" id="elem">Привет! Меня показывают и скрывают!</p>

JS:

$('.input-number').change(function() {
   $("#elem").fadeIn('slow');
   setTimeout("$('#elem').fadeOut();", 2000);
});

А вот пример - ссылка

Но выводится это путём добавления div на сайте с классом display:none;. Так не очень хотелось бы. Можно как-то, чтобы например это генерировал JS? Примерно так:

var tekst = '<p style="position:fixed;top:20px;right:20px;">Привет! Меня показывают и скрывают!</p>';

Т.е. записать информацию в переменную и выводить её точно также по изменению значения в поле input. По этому поводу информации не нашёл.

Можно, конечно, так - ссылка, но опять же надо иметь в верстке скрытый div.

<input type="text" class="input-number">
<div id="elem" style="display:none;"></div>

JS:

$('.input-number').change(function() {
   var tekst = '<p id="elem2" style="position:fixed;top:20px;right:20px;">Привет! Меня показывают и скрывают:)</p>';
   $('#elem').html(tekst).fadeIn(); 
   setTimeout("$('#elem').fadeOut();", 2000);
});

Надеюсь на Вашу помощь :)

Answer 1

Добавляйте Ваш элемент к body

jQuery(document).ready(function($) { 
  var msg = $('<p id="msg">Привет! Меня показывают и скрывают:)</p>'); 
  $('body').append(msg); 
   
  $('.input-number').change(function() { 
    msg.fadeIn(); 
    setTimeout(function() { 
      msg.fadeOut(); 
    }, 2000); 
  }); 
});
#msg { 
  position: fixed; 
  top: 20px; 
  right: 20px; 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" class="input-number"/>

READ ALSO
Возможно ли сделать веревку на SVG?

Возможно ли сделать веревку на SVG?

вот то, что делаю http://codepenio/cache0/pen/rjQwZJ

321
Передать значение переменной JS в стиль CSS

Передать значение переменной JS в стиль CSS

Нужно передать диву ширину, значение которой вычисляется в JS

843
Линейный массив в иерархический JS [требует правки]

Линейный массив в иерархический JS [требует правки]

Добрый вечер, прошу помощи! Есть линейный массив:

305