jQuery append() not working for concatenated String

Question

(Full code below)

This

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

does work. But this

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

doesn't.

The fact that the first version works lets me assume that the problem is not the id variable...

So the full code is

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

.append expects an element and not string. If you have HTML string, use .html() instead — Rajesh Dixit
– Rajesh Dixit, Commented Oct 7, 2016 at 6:21
.append() will work after the DOM load. parent div is loaded but concurrently you are appending to that element which is not in DOM at that time. try to append after the document ready — Sudhanshu Saxena
– Sudhanshu Saxena, Commented Oct 7, 2016 at 6:26
I am developing in ASP.NET Razor: $('#@r.id').click(function() { clickOnElement(@r.id); }); — elementzero23
– elementzero23, Commented Oct 7, 2016 at 6:48

Mohit Tanwani · Accepted Answer · 2016-10-07 06:25:17Z

2

Use .appendTo()

The .append() and .appendTo() methods perform the same task.
The major difference is in the syntax-specifically, in the placement of the content and target.
With .append(), the selector expression preceding the method is the container into which the content is inserted.
With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

Code Example

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

FYI,

Please make sure the element exists in the DOM and you're appending it in correct selector.

Hope this helps.

edited Oct 7, 2016 at 6:25

answered Oct 7, 2016 at 6:16

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

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

7 Comments

elementzero23 Over a year ago

Yes, you made a mistake with the ' but I corrected it. This $('#' + id).parent().append("<div id='pop-up" + id + "'>hello</div>"); seems to work. Can anyone explain why??

Mohit Tanwani Over a year ago

I've updated my answer, just make sure that your use appendTo at right one.

Sergio Alen Over a year ago

there's nothing wrong with .append() it's just a quotation mark confilct.

elementzero23 Over a year ago

Thank you for your answer. The div is appended correctly now. Only the id attribute is not working yet. But maybe I could do a workaround with the .attr() method of jQuery.

Mohit Tanwani Over a year ago

Okay, Glad to see that it finally helps you.

|

madalinivascu · Accepted Answer · 2016-10-07 06:54:19Z

1

Try the following

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

the proper way to add text to a created object is to use the text property:

demo:https://jsfiddle.net/gx6mrqr7/

edited Oct 7, 2016 at 6:54

answered Oct 7, 2016 at 6:52

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

4 Comments

elementzero23 Over a year ago

This actually worked. Thank you. Any suggestions why?

madalinivascu Over a year ago

from what i can tell jquery can't add property to a closed div <div>Hello</div>

elementzero23 Over a year ago

I also noticed that "pop-up-" + id doesn't work, but "pop-up" + id does.

elementzero23 Over a year ago

Well, I'm not relying on the - ;-)

Satpal · Accepted Answer · 2016-10-07 06:20:34Z

1

Create HTML using jQuery(html, attributes), You will be safe from quotes mess

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

answered Oct 7, 2016 at 6:20

Satpal

134k13 gold badges168 silver badges171 bronze badges

Collectives™ on Stack Overflow

jQuery append() not working for concatenated String

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related