• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 1037|回復: 0
      上一主題 下一主題

      jQuery - 添加元素

      1298

      主題

      0

      好友

      39

      積分

      管理員 離線 發信

      跳轉到指定樓層
      樓主
      發表于 2014-02-19 15:35 | 只看該作者 | 倒序瀏覽

      jQuery - 添加元素

      通過 jQuery,可以很容易地添加新元素/內容。

      添加新的 HTML 內容

      我們將學習用于添加新內容的四個 jQuery 方法:

      • append() - 在被選元素的結尾插入內容
      • prepend() - 在被選元素的開頭插入內容
      • after() - 在被選元素之后插入內容
      • before() - 在被選元素之前插入內容

      jQuery append() 方法

      jQuery append() 方法在被選元素的結尾插入內容。

      實例

      $("p").append("Some appended text.");

      親自試一試

      jQuery prepend() 方法

      jQuery prepend() 方法在被選元素的開頭插入內容。

      實例

      $("p").prepend("Some prepended text.");

      親自試一試

      通過 append() 和 prepend() 方法添加若干新元素

      在上面的例子中,我們只在被選元素的開頭/結尾插入文本/HTML。

      不過,append() 和 prepend() 方法能夠通過參數接收無限數量的新元素??梢酝ㄟ^ jQuery 來生成文本/HTML(就像上面的例子那樣),或者通過 JavaScript 代碼和 DOM 元素。

      在下面的例子中,我們創建若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 append() 方法把這些新元素追加到文本中(對 prepend() 同樣有效):

      實例

      function appendText(){var txt1="<p>Text.</p>";        // 以 HTML 創建新元素var txt2=$("<p></p>").text("Text.");  // 以 jQuery 創建新元素var txt3=document.createElement("p"); // 以 DOM 創建新元素txt3.innerHTML="Text.";$("p").append(txt1,txt2,txt3);     // 追加新元素}

      親自試一試

      jQuery after() 和 before() 方法

      jQuery after() 方法在被選元素之后插入內容。

      jQuery before() 方法在被選元素之前插入內容。

      實例

      $("img").after("Some text after");$("img").before("Some text before");

      親自試一試

      通過 after() 和 before() 方法添加若干新元素

      after() 和 before() 方法能夠通過參數接收無限數量的新元素??梢酝ㄟ^ text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素。

      在下面的例子中,我們創建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 after() 方法把這些新元素插到文本中(對 before() 同樣有效):

      實例

      function afterText(){var txt1="<b>I </b>";          // 以 HTML 創建新元素var txt2=$("<i></i>").text("love ");   // 通過 jQuery 創建新元素var txt3=document.createElement("big"); // 通過 DOM 創建新元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3);     // 在 img 之后插入新元素}

      親自試一試

      jQuery HTML 參考手冊

      如需有關 jQuery HTML 方法的完整內容,請訪問以下參考手冊:

      來源:http://www.w3school.com.cn/jquery/jquery_dom_add.asp