代码之家  ›  专栏  ›  技术社区  ›  user2571510

jQuery:在文本区域内将段落附加到html的最佳方法

  •  1
  • user2571510  · 技术社区  · 10 年前

    我有一个包含变量html内容的文本区域,它总是被包装在段落(p)标记中。

    HTML(附加前):

    <textarea rows='7' class='form-control' id='comments'><p>My variable HTML content.</p></textarea>
    

    我在jQuery中使用以下方法获取此内容:

    jQuery:

    $('#comments').val();
    

    现在我需要在这段末尾但在p标记内附加HTML。

    HTML(附加后):

    <textarea rows='7' class='form-control' id='comments'><p>My variable HTML content. Some appended HTML.</p></textarea>
    

    当然,我可以替换上面的最后4个字符(即结束p标记),然后附加HTML,然后再次添加结束p标记。 有人能告诉我在jQuery中是否有更好的方法来实现这一点吗?

    提前非常感谢,蒂姆。

    4 回复  |  直到 10 年前
        1
  •  4
  •   adeneo    10 年前

    将文本区域的字符串值解析为HTML,并插入任意内容,然后将HTML的字符串值传回

    $('#comments').val(function(_, val) {
        return $('<div />', {html:val}).find('p').append('content').end().html();
    });
    

    FIDDLE

        2
  •  2
  •   Claudio Redi    10 年前

    这可能会奏效

    var html = $('#comments').val();
    $('#comments').val(
        $(html).append('  Some appended HTML.')[0].outerHTML
    );
    

    DEMO

        3
  •  0
  •   Thijs Kramer    10 年前

    您可以将该值插入到临时div中 <p> -元素,并再次获取更新的内容:

    var tmpDiv = $('<div></div>'); //create temporary element
    tmpDiv.html($('#comments').val()); // add HTML from textarea
    $(someHtml).appendTo($('p', tmpDiv)); // append custom HTML to P inside temp element
    newTextAreaValue = tmpDiv.html(); // retrieve new value
    
        4
  •  0
  •   nocarrier    10 年前

    好的。我真的很喜欢这个!

    $('#comments').text($($('#comments').text()).append(' a new insert!').text());
    

    不要看太久。可能会伤害眼睛:-)