CODEWITHSUNDEEP
javascriptjqueryappend
Everyone_Else
Everyone_Else

Reputation: 3264

Append is not a function jquery

In the following code, I'd like to be able to append test_div to the element that was clicked on. However, I get the error message that TypeError:e.srcElement.appendis not a function. 

$(document).ready(function() {

    onclick = function (e) {
        var test_div = document.createElement("div");
        target = e.srcElement
        target.append(test_div);
        }

    $('#dialogue').on('click', onclick);

});

I've tried printing out the type of e.srcElement, but it just says object, which isn't very helpful. What's the correct way to append an element to the item clicked on?

Upvotes: 4

Views: 29729

Answers (4)

Charlie
Charlie

Reputation: 23838

e.srcElement is a DOM node. The correct method to append another element in to it is appendChild

.append is the equivalent JQuery method.

Here is the documentation

"I've tried printing out the type of e.srcElement, but it just says object"

console.log() your debug messages.

Upvotes: 1

binskits
binskits

Reputation: 248

Alternatively, the javascript method you can use is appendChild()

target.appendChild(test_div);

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

You need to use jQuery for this. Moreover, you are mixing vanilla JavaScript and jQuery. An alternate way of doing this is:

$(document).ready(function() {

  $('#dialogue').on('click', function (e) {
    var test_div = $("<div />");
    $(this).append(test_div);
  });

});

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82251

.append() is jquery method. You need to convert DOM object into jquery object for using jquery methods:

 $(target).append(test_div);

Upvotes: 17

Related Questions