用HTML换行文本

Question

我需要用<textarea>标记包装元素的整个内容，减去单击的元素。

HTML

<div>
    Some text
    <ul>
        <li>more content</li> 
    </ul>
    <span id="click2wrap"></span>
</div>

JS

$(document).on('click', '#click2wrap', function() {
    var wrapped = $(this).parent().text();
    $(wrapped).wrap('<textarea></textarea>'); 
});

所以，我的功能目前看起来是这样的，当点击#click2rap时，它一定会导致：

<div>
    <textarea>
    Some text
    <ul>
        <li>more content</li> 
    </ul>
    </textarea>
    <span id="click2wrap"></span>
</div>

Answer 1

一开始在textarea中看不到父html代码。要访问元素的id，应使用#符号。意思是

$(document).on('click', 'click2wrap', function() {
    var wrapped = $(this).parent().text();
    $(wrapped).wrap('<textarea></textarea>'); 
});

应该改为

$(document).on('click', '#click2wrap', function() {
    var wrapped = $(this).parent().text();
    $(wrapped).wrap('<textarea></textarea>'); 
});

要访问div元素，请使用.parent()函数，而对于ul元素，则使用.prev()函数。

更改

 $(document).on('click', '#click2wrap', function() {
     var wrapped = $(this).parent().text();
     $(wrapped).wrap('<textarea></textarea>'); 
 });

至

$(document).on('click', '#click2wrap', function() {
     var wrapped = $(this).prev();
     $(wrapped).wrap('<textarea></textarea>'); 
 });

Answer 2

使用wrapInner函数。此外，还必须在jquery中添加几个标签：JS Fiddle

因为textarea无法显示html标记，所以您需要获取文本区域（具有html标记）的值，并在剥离标记的同时将该值重新输入到textarea中。

$(document).on('click', '#click2wrap', function () {
    var wrapped = $('#click2wrap').parent();
    $('#click2wrap').text('');
    $(wrapped).wrapInner('<textarea></textarea>');
    $('textarea').text($('textarea').text());
});