JQuery Append() не работает для каскадного строки

Question

(Полный код ниже)

Это

$('#' + id).parent().append('<div id="pop-up">hello</div>'); 

делает работу. Но это

$('#' + id).parent().append('<div id="pop-up-' + id + '">hello</div>'); 

нет.

Тот факт, что первая версия работает позволяет мне предположить, что проблема заключается не в id переменной ...

Так что полный код

function clickOnElement(id) { 
    var obj = {}; 
    obj.clicked = String(id); 
    var jsonData = JSON.stringify(obj); 
    $.ajax({ 
     type: 'POST', 
     url: '../db/RequestHandler.ashx', 
     data: jsonData, 
     contentType: 'application/json; charset-utf-8', 
     success: function (response) { 
      // Add the div for the dialog-box 
      $('<div>Hello</div>', { 
       "id": "pop-up" + id 
      }).appendTo($('#' + id).parent()); 
     }, 
     error: function() { 
      console.log("request error"); 
     } 
    }); 
} 

Answer 1

Попробуйте следующее

var parent = $('#' + id).parent(); 
var el = $('<div>', {id: "pop-up"+id,text:"hello"}); 
el.appendTo(parent); 

правильный способ добавить текст в созданный объект является использование свойства текста:

демо: https://jsfiddle.net/gx6mrqr7/

Answer 2

Использование .appendTo()

• Методы .append() и .appendTo() выполняют ту же задачу.
• Основное различие заключается в синтаксисе, в частности, при размещении контента и цели.
• С .append() выражение селектора, предшествующее методу, является контейнером, в который вставлен контент.
• С другой стороны, с .appendTo() содержимое предшествует методу, либо как выражение выбора, либо как разметка, созданная «на лету», и она вставляется в целевой контейнер.

Пример кода

$('<div>Hello</div>', { 
    "id": "pop-up" + id 
}).appendTo($('#' + id).parent()); 

FYI,

Пожалуйста, убедитесь, что элемент существует в DOM, и вы его добавления в правильном селекторе.

Надеюсь, что это поможет.

Answer 3

Создание HTML с помощью jQuery(html, attributes), вы будете в безопасности от котировок беспорядке

$('#' + id) 
    .parent() 
    .append($('<div>', { 
     id: "pop-up-" + id , 
     text: "hello" 
    });