2. 科技
    3. JQuery获取元素内容，更新元素内容

    JQuery获取元素内容，更新元素内容

    科技2025-12-23  7

    **获取元素内容**

    .html() &&.text()方法 **.html()方法** 返回HTML源代码，但只返回第一个匹配的元素内部的HTML，包括他所有的后代元素。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取元素内容</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body> <ul> <li id="first"><em>牛奶</em></li> <li id="second">眼睛</li> <li id="third">发带</li> <li id="fourth">芒果干</li> </ul> <script> $(function(){ alert($("ul").html()); }) </script></body></html>

    $(“li”).html会输出什么？ 答：只会匹配第一个li元素。显示

    .text（）方法 从选取结果中获取文本元素，而不是源代码，返回选取结果中的每一个元素，包括所有后代元素中的文本。 上面的代码将方法更改后结果显示为 将ul更改为li 结果显示：

    **更新元素内容**

    .html()方法 为匹配结果中的每个元素设置相同的新内容，新内容可以包含HTML，更改匹配结果中的所有元素。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取元素内容</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body> <ul> <li id="first"><em>牛奶</em></li> <li id="second">眼睛</li> <li id="third">发带</li> <li id="fourth">芒果干</li> </ul> <script> $(function(){ $("li").html('<b>HTML</b>'); }) </script></body></html>

    结果更新为： .text()方法 给匹配结果集中的所有元素设置新文字，无论输入任何标签都会被认为是文本。也应有于匹配结果集的所有元素，但是只能设置文本内容。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取元素内容</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body> <ul> <li id="first"><em>牛奶</em></li> <li id="second">眼睛</li> <li id="third">发带</li> <li id="fourth">芒果干</li> </ul> <script> $(function(){ $("li").text('<b>HTML</b>'); }) </script></body></html>

    .remove（）方法 移除匹配结果集中的所有元素，包括其中的标签和文本。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>更新元素内容</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body> <ul> <li id="first"><em>牛奶</em></li> <li id="second">眼睛</li> <li id="third">发带</li> <li id="fourth">芒果干</li> </ul> <script> $(function(){ $("#first").remove(); }) </script></body></html>

    可以看到id为first的一行完全被移除。

    .replaceWith()方法 删除匹配结果集中的每个元素，再将原来的位置替换为新的内容。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>更新元素内容</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body> <ul> <li id="first"><em>牛奶</em></li> <li id="second">眼睛</li> <li id="third">发带</li> <li id="fourth">芒果干</li> </ul> <script> $(function(){ $("#second").replaceWith('<li>JavaScript</li>'); }) </script></body></html>

    一整行内容都被删除，包括标签，所以在括号里要写想要替换的的标签。

    Processed: 0.016, SQL: 9