Jquery:如何使用Jquery选择器获取/设置字符串变量的html?

时间:2021-02-26 21:12:09

Firstly, sorry for my English (I'm from China).

首先,对不起我的英语(我来自中国)。

By reading this article(how to apply jQuery element selection to a string variable), I can successfully get Elements from a String which stores HTML text. For example:

通过阅读本文(如何将jQuery元素选择应用于字符串变量),我可以成功地从存储HTML文本的String中获取Elements。例如:

var htmlstr = "<div><ul><li>some text 1</li></ul></div><div><ul id=list><li>some text 2</li></ul></div>";
var s = $('ul#list', $(htmlstr)).html();

s will be <li>some text 2</li>. It's what I want.

s将是

  • some text 2 。这就是我想要的。

  • 一些文字2.这就是我想要的。

    But the question is, if I want to add another LI element to this string (htmlstr) how can I do?

    但问题是,如果我想在此字符串中添加另一个LI元素(htmlstr),我该怎么办?

    I set s = new html string but htmlstr doesn't change.

    我设置s = new html string但htmlstr不会改变。

    Thanks

    3 个解决方案

    #1


    4  

    You can do it like this in a bit less code:

    你可以用更少的代码这样做:

    var htmlstr = "<div><ul><li>some text 1</li></ul></div><div><ul id='list'><li>some text 2</li></ul></div>";
    htmlstr = $("<div />").html(htmlstr).find("ul#list").append("<li>New Item</li>").end().html();
    alert(htmlstr);
    

    Just change that find selector and/or the append text if you want to stick the element in a different place.

    如果要将元素粘贴在不同的位置,只需更改查找选择器和/或追加文本即可。

    #2


    1  

    I think it's possible to select the ul and append the new li, with the following method: http://api.jquery.com/append/

    我认为可以选择ul并使用以下方法追加新的li:http://api.jquery.com/append/

    #3


    1  

    I'm not sure if this is the best way but what about this:

    我不确定这是不是最好的方法,但是这个怎么样:

    var htmlstr = "<div><ul><li>some text 1</li></ul></div><div><ul id=list><li>some text 2</li></ul></div>";
    // make sure you choose a suitable Id here that won't conflict
    $('body').append('<div id="test" style="display: none;">' + htmlstr + '</div>');
    
    $test = $('#test');
    
    $test.find('ul').append('<li>new</li>');
    
    htmlstr = $test.html();
    // clean up the DOM
    $test.remove();
    
    
    var s = $('ul#list', $(htmlstr)).html();
    

    Basically, you insert the HTML into the DOM, append the new list item and then get the resulting HTML back and remove the elements you added.

    基本上,您将HTML插入DOM,附加新的列表项,然后返回结果HTML并删除您添加的元素。

    #1


    4  

    You can do it like this in a bit less code:

    你可以用更少的代码这样做:

    var htmlstr = "<div><ul><li>some text 1</li></ul></div><div><ul id='list'><li>some text 2</li></ul></div>";
    htmlstr = $("<div />").html(htmlstr).find("ul#list").append("<li>New Item</li>").end().html();
    alert(htmlstr);
    

    Just change that find selector and/or the append text if you want to stick the element in a different place.

    如果要将元素粘贴在不同的位置,只需更改查找选择器和/或追加文本即可。

    #2


    1  

    I think it's possible to select the ul and append the new li, with the following method: http://api.jquery.com/append/

    我认为可以选择ul并使用以下方法追加新的li:http://api.jquery.com/append/

    #3


    1  

    I'm not sure if this is the best way but what about this:

    我不确定这是不是最好的方法,但是这个怎么样:

    var htmlstr = "<div><ul><li>some text 1</li></ul></div><div><ul id=list><li>some text 2</li></ul></div>";
    // make sure you choose a suitable Id here that won't conflict
    $('body').append('<div id="test" style="display: none;">' + htmlstr + '</div>');
    
    $test = $('#test');
    
    $test.find('ul').append('<li>new</li>');
    
    htmlstr = $test.html();
    // clean up the DOM
    $test.remove();
    
    
    var s = $('ul#list', $(htmlstr)).html();
    

    Basically, you insert the HTML into the DOM, append the new list item and then get the resulting HTML back and remove the elements you added.

    基本上,您将HTML插入DOM,附加新的列表项,然后返回结果HTML并删除您添加的元素。