jQuery的 - 不是動態的元素創建

我試圖添加其他<a>元素後<a id='link1'>jQuery的 - 不是動態的元素創建

<html> 
    <head> 
     <script src="js/jquery-1.6.4.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var myHTML = "<div id='test'>"; 
       myHTML += "<span><a id='link1'>link 1</a></span>"; 
       $("a#link1").after("<a id='link2'>link 2</a>"); 
       myHTML += "</div>"; 
       $("div#insertHere").html(myHTML); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="insertHere"> 

     </div> 
    </body> 
</html>

的輸出上面應該是

<body> 
    <div id="insertHere"> 
     <div id="test"> 
     <span> 
      <a id="link1">link 1</a> 
      <a id="link2">link 2</a> 
     </span> 
     </div> 
    </div> 
</body>

來源

2012-02-08 techlead

您正在嘗試查詢尚未添加到DOM的元素。
當您執行$("a#link1")時，它不會檢索任何元素，因爲您之前「生成」的HTML不在DOM中，它仍然只是變量myHTML中的文本。

生成所有的標記，並立即應用它：如果您需要綁定事件（或其他人）給你添加的元素

$(document).ready(function() { 
    var myHTML = "<div id='test'>"; 
    myHTML += "<a id='link1'>link 1</a>"; 
    myHTML += "<a id='link2'>link 2</a>"; 
    myHTML += "</div>"; 
    $("div#insertHere").html(myHTML); 
});

，你可以使用DOM manipualtion API從jQuery的：

$(document).ready(function() { 
    var $div = $('<div id="test">').addClass('myClass'); 

    $('<a id="link1">link 1</a>').click(function() { }).appendTo($div); 
    $('<a id="link2">link 2</a>').appendTo($div); 

    $("div#insertHere").append($div); 
});

進一步閱讀：

jQuery - Manipulation

來源

2012-02-08 15:37:40

在您的標記insertHere格是空的我沒有看到任何現有的錨點ID爲link1。我認爲你正在尋找這個。

$(document).ready(function() { 
      var myHTML = "<div id='test'>"; 
      myHTML += "<a id='link1'>link 1</a>"; 
      myHTML += "<a id='link2'>link 2</a>"; 
      myHTML += "</div>"; 
      $("#insertHere").html(myHTML); 
    });

您可以使用after上你叫after方法元素後要插入的元素。

來源

2012-02-08 15:35:38 ShankarSangoli

的另一種方法來添加到HTML已經存在一個div是使用

$("div#insertHere").append(someHML);

每個這就是所謂的多碼將被添加到該元件的時間。

嘗試減少DOM操作（在添加前存儲儘可能多的HTML）以減少加載時間。

實施例：

$("div#insertHere").append("<div id='test'></div>"); 
$("div#test").append("<span><a id='link1'>link 1</a></span>"); 
$("div#test").append("<span><a id='link2'>link 2</a></span>");

來源

2012-02-08 15:38:02 Pluckerpluck

jQuery的 - 不是動態的元素創建

回答

相關問題