javascript - JQuery:动态创建的 html 不响应 JQuery 函数

Question

我正在使用这段代码动态生成一个 div:

// my html string :)
var myString = '<id="newDiv"div> hello </div>';

// html decode the string    
myString = $("<div />").html(myString).text();

// appending the string
$("#parentDiv").append(myString);

它附加得很好(它显示在屏幕上)。并且还做 $('#newDiv').length 正确显示值 1。但是当我尝试在它(或任何函数)上调用 remove() 时

$('#newDiv').remove()

没有任何反应。这是怎么回事？

Answer 1

那里有一些额外的工作。和 <id="newDiv"div> hello </div>实际上是 <id="newDiv"div> hello </div>根据我的理解，这不是正常的 html。

//here is what I think you wanted:
    $('<div id="newDiv">hello</div>').appendTo("#parentDiv");
    alert($("#newDiv").length);
    $("#newDiv").remove();

---

编辑 - 解码 html 文本，然后附加它:

var emptyDivNeverAppendedToDom = $('<div/>');
//per the other so.com question
    var html = emptyDivNeverAppendedToDom.html('&lt;div id="newDiv"&gt; world &lt;/div&gt;').text();
//just being verbose.
    var elem = $(html);
    //the actual work
    elem.appendTo("#parentDiv");
    //elem.remove();

一个js fiddle取消注释 elem.remove() lin 以观察它的工作。