javascript - 获取动态创建的文本

Question

我有一个文本区域，我在其中放置了 HTML 代码，然后在 preview div 中动态预览此 HTML:

<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

只需将 text() 更改为 val()。

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