Question

我有一个textarea，我在其中放置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);
    });
});

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);
    });
});

获取动态创建的文本

2 个答案: