JQuery: Dynamically-created html not responding to JQuery functions

Question

I'm using this code to generate a div dynamically:

// my html string :)
var myString = '&lt;id="newDiv"div&gt; hello &lt;/div&gt;';

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

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

It appends just fine (it shows up on the screen). And also doing $('#newDiv').length correctly shows a value of 1. But then when I try to call remove() on it (or any function) like

$('#newDiv').remove()

nothing happens. What is going on?

DefyGravity · Accepted Answer · 2011-12-09 19:37:42Z

3

there is a bit of extra work there. and the <id="newDiv"div> hello </div> is actually <id="newDiv"div> hello </div> which is not normal html to my understanding.

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

edit - decode the html text, then attach it:

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

a js fiddle uncomment the elem.remove() lin to watch it work.

edited Dec 9, 2011 at 19:37

answered Dec 9, 2011 at 18:49

DefyGravity

6,1015 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zakdances Over a year ago

I'm following the green-checked answer here stackoverflow.com/questions/8437352/… because the HTML is encoded. It seems to be perfectly valid once its decoded (it appends just fine). Is that not correct?

fehays Over a year ago

You put your id in the wrong place. should be <div id="newDiv"> hello </div>

DefyGravity Over a year ago

edited with the html decode option you wanted. tested '<div id="newDiv"> world <div id="innerDiv">!</div></div>' too.

dammoer · Accepted Answer · 2014-05-07 07:20:14Z

0

Works great as soon as you put the id at the right place :

var myString = '&lt;div id="newDiv"&gt; hello &lt;/div&gt;';

http://jsfiddle.net/NN9v2/1/

answered May 7, 2014 at 7:20

dammoer

163 bronze badges

Collectives™ on Stack Overflow

JQuery: Dynamically-created html not responding to JQuery functions

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related