Fetching динамически созданный текст

Question

У меня есть текстовое поле, в котором я ставлю HTML-код, а затем динамически просматривать этот HTML внутри preview DIV:

<div id="preview"> 
</div> 

<textarea id="fooBar"> 
    <div style="background-color:green;"></div> 
</textarea> 

JQuery код выглядит следующим образом:

$(document).ready(function() { 
    var html = $('#fooBar').text(); 
    $('#preview').html(html); 
    $('#fooBar').on('keyup', function() { 
     var html = $(this).text(); 
     $('#preview').html(html); 
    }); 
}); 

проблема в том, что изменение HTML-кода ничего не делает. В журнале консоли в переменной html всегда отображается одно и то же начальное содержимое, оно не изменяется.

Как это решить, и почему это так?

Answer 1

Просто измените текст() на val().

$(document).ready(function() { 
    var html = $('#fooBar').text(); 
    $('#preview').html(html); 
    $('#fooBar').on('keyup', function() { 
     var html = $(this).val(); 
     $('#preview').html(html); 
    }); 
}); 

Answer 2

Я думаю, вы должны использовать val() вместо text(). val() используется для элементов формы, таких как textarea в вашем случае, тогда как text() - это HTML-элементы. Я надеюсь, что это сработает

<div id="preview"></div> 
<textarea id="fooBar"> 
     <div style="background-color:green;"></div> 
    </textarea>  


    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script> 
    $(document).ready(function() { 
    var html = $('#fooBar').val(); 
    $('#preview').html(html); 
    $('#fooBar').on('keyup', function() { 
     var html = $(this).val(); 
     $('#preview').html(html); 
    }); 
});