Javascript 获取动态创建的文本

我有一个文本区域，在其中放置HTML代码，然后在

preview

div中动态预览此HTML：

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

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

问题是，更改HTML代码并不能什么都不做。Console log on html变量始终显示相同的初始内容，它不会被更改

如何解决这个问题，为什么会这样？

只需将text（）更改为val（）

我认为应该使用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);
    });
});

$（文档）.ready（函数（）{
var html=$（'#fooBar'）.val（）；
$（'#preview'）.html（html）；
$（'#fooBar'）。在（'keyup'，function（）上{
var html=$（this.val（）；
$（'#preview'）.html（html）；
});
});

$(document).ready(function () {
    var html = $('#fooBar').text();
    $('#preview').html(html);
    $('#fooBar').on('keyup', function() {
        var html = $(this).val();
        $('#preview').html(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);
    });
});