jQuery操作HTML代碼方法介紹

更新時(shí)間：2022年05月04日 11:40:17 作者：.NET開發(fā)菜鳥

這篇文章介紹了jQuery操作HTML代碼的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

html()可以對(duì)HTML代碼進(jìn)行操作，類似于元素JavaScript中的innerHTML。

例如：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html()操作</title>
    <style>
       *{
           margin: 0px;
           padding: 0px;
       }
       input{
           display: block;
           float: left;
       }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
            $("#btnGet").click(function(){
                var html=$("div.left").html();
                alert(html);
             });
             $("#btnSet").click(function(){
                var html=$("div.left").html("<div style='border:1px solid red;'><p>這是一個(gè)段落</p></div>");
             });
       });
    </script>
</head>
<body>
    <div id="mainbox">
         <h1>飄飛雨絮</h1>
         <div class="left">
             <img src="../qq.jpg" width="150" height="150"/>
             <br />
         </div>
    </div>
    <input type="button" id="btnGet" value="獲取html()內(nèi)容" style="margin-right:10px;" />
    <input type="button" id="btnSet" value="單擊改變內(nèi)容" />
</body>
</html>

效果：

到此這篇關(guān)于jQuery操作HTML代碼的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

原生js和jquery實(shí)現(xiàn)圖片輪播特效
本文給大家分享的是使用原生JS和JQ兩種方法分別實(shí)現(xiàn)相同的圖片輪播特效，十分的實(shí)用，也非常方便大家對(duì)比學(xué)習(xí)原生js和jQuery，有需要的小伙伴可以參考下。
2015-04-04
非常棒的jQuery圖片輪播效果
這篇文章主要為大家介紹了一款非常棒的jQuery圖片輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-04-04
jQuery取得元素標(biāo)簽名稱小結(jié)（附代碼）
這篇文章主要介紹了 jquery如何取得元素標(biāo)簽名稱，將html和js代碼附上，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
2017-08-08
jQuery+vue.js實(shí)現(xiàn)的九宮格拼圖游戲完整實(shí)例【附源碼下載】
這篇文章主要介紹了jQuery+vue.js實(shí)現(xiàn)的九宮格拼圖游戲,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合vue.js針對(duì)圖片的相關(guān)操作技巧,需要的朋友可以參考下
2017-09-09
jQuery實(shí)現(xiàn)ajax回調(diào)函數(shù)帶入?yún)?shù)的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax回調(diào)函數(shù)帶入?yún)?shù)的方法,結(jié)合實(shí)例形式對(duì)比分析了jQuery實(shí)現(xiàn)ajax回調(diào)函數(shù)不帶入?yún)?shù)與帶入?yún)?shù)的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-06-06
jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-06-06
解析jQuery的三種bind/One/Live事件綁定使用方法
本篇文章主要是對(duì)jQuery的三種bind/One/Live事件綁定使用方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
jqTransform form表單美化插件使用方法
jQtransForm jQuery表單美化修飾插件，附帶有PHP提交程序，當(dāng)然ASP/ASP/NET/JSP都是同理，這里主要是jQuery美化部分的實(shí)例，美化對(duì)象為文本框、密碼框、文本域、Select下拉框、按鈕等，有了這些示例，美化其它的表單元素應(yīng)該不是大問題。
2012-07-07
jQuery獲取單選按鈕radio選中值與去除所有radio選中狀態(tài)的方法
下面小編就為大家?guī)硪黄猨Query獲取單選按鈕radio選中值與去除所有radio選中狀態(tài)的方法。
2017-05-05
分類解析jQuery選擇器
本篇文章詳細(xì)概述了jQuery選擇器的作用并對(duì)其進(jìn)行了實(shí)例解析，有助于理解與學(xué)習(xí)。文章通過對(duì)jQuery選擇器進(jìn)行分類的形式進(jìn)行一一介紹，有助于理解與記憶，希望通過對(duì)本文的閱讀對(duì)大家有所幫助
2016-11-11