выводя HTML-теги как текст в JQuery

Question

У меня есть этот код:

Image height: <input type="text" id="imgHeight" /><br /><br /> 
Image width: <input type="text" id="imgWidth" /><br /><br /> 
Number of images: <input type="text" id="imgNo" /><br /><br /> 
    <input type="button" value="Show code" id="result" /><br /><br /> 

    <textarea rows="20" cols="60" id="output"></textarea> 
    <script> 
    $(document).ready(function(){ 
     $("#result").click(function(){ 
      var imgHeight = $("#imgHeight").val(); 
      var imgWidth = $("#imgWidth").val(); 
      var imgNo = $("#imgNo").val(); 
      for(i=0; i<imgNo; i++){ 
       $("#output").text("<img src='' width='"+imgHeight+"' height='"+imgWidth+"' />"); 
      } 
      }); 
     }); 
    </script> 

То, что я хотел бы сделать это, чтобы иметь возможность выводить HTML-код в виде простого текста в текстовое поле (я хотел бы людей чтобы иметь возможность копировать сгенерированный код). Я бы хотел, чтобы тег img отображался в текстовой области столько раз, сколько я указал в поле «Количество изображений». Приведенный выше код выводит код как текст только один раз, независимо от «Количество изображений», которое я вводил. Можете ли вы мне помочь? Thx заранее

[EDIT] Спасибо большое за быстрый ответ Теперь я застрял с чем-то другом. Я хочу, чтобы пользователи могли размещать свои собственные ссылки, и я хочу, чтобы эти ссылки отображались в текстовом поле в каждом созданном теге изображения. Однако я не могу представить способ «захватить» содержимое каждого входа и поместить его в тег. Он всегда показывает содержимое первого ввода Любая помощь, пожалуйста? :) Вот код:

Image height: <input type="text" id="imgHeight" /><br /><br /> 
Image width: <input type="text" id="imgWidth" /><br /><br /> 
Number of images: <input type="text" id="imgNo" /><br /><br /> 
<p id="additionalImgs"></p> 
    <input type="button" value="Show code" id="result" onclick="abba()" /><br /><br /> 
    <textarea rows="20" cols="60" id="output"></textarea> 
    <script> 
    $(document).ready(function(){ 
     $("#result").click(function(){ 
      var imgHeight = $("#imgHeight").val(); 
      var imgWidth = $("#imgWidth").val(); 
      var imgNo = $("#imgNo").val(); 
      var text = ''; 
      var y = 1; 
      for(i=0; i<imgNo; i++){ 
      var aaa = $("#additionalImgs input").val(); 
      text += "<img src='"+aaa +"' width='"+imgHeight+"' height='"+imgWidth+"' name='"+ y++ +"' />"; 
} 
$('#output').text(text); 

      }); 
     }); 
$(document).ready(function(){ 
      $("#imgNo").change(function(){ 
       var imgNo = $("#imgNo").val(); 
       x = 1; 
       var y = 1; 
       var text = "Image number: "; 
       for(i=0; i<imgNo; i++){ 
       $("#additionalImgs").append(text + y++ + ' link' + "<input type='text' name='"+ x++ +"'><br />")}; 
       }); 
      }); 

    </script> 

Answer 1

.text() перезаписывает существующий текст в элементе. Вы можете использовать .append() или добавить текст в переменную и применить эту переменную с .text() после того, как цикл:

var text = ''; 
for(i=0; i<imgNo; i++){ 
    text += "<img src='' width='"+imgHeight+"' height='"+imgWidth+"' />"; 
} 
$('#output').text(text); 

Answer 2

Вы можете получить «внешний HTML» тега IMG и поместить его в текстовое поле, как это:

var html = $('<div>').append($('#imageID').clone()).html(); 
$("#textboxID").val(html); 

Это основано на ответе Box9 по адресу: jQuery: outer html()

См демо на JS Fiddle: http://jsfiddle.net/VUbfh/1/

Answer 3

Вы забыли добавить текст, в каждой итерации задает текст, не добавляя. Измените тело цикла следующим образом:

txt=$("#output").text(); 
$("#output").text(txt + "<img src='' width='"+imgHeight+"' height='"+imgWidth+"' />");