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); 
});

Если вам нужно связать события (или ещё) элементы, которые вы добавляете, вы можете использовать дом 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 - динамический элемент не создается

ответ

Смежные вопросы