appendChild is not a function using $.confirm()

Question

good day, I'm struggling to solve this problem. I spent 1 day to try to solve this problem but no luck for me.

I am trying to append a child inside onContentReady function on $.confirm() but seems doesn't work for me. here is the code

html

<button onclick="btnclick()">click</button>

Javascript

 function btnclick() {
    // body...
    $.confirm({
    title:'test',
    content: '<div class=".confirm_body"> </div>',
    onContentReady:function() {

        var body = this.$content.find('.confirm_body');

        var h3 = document.createElement('h3');
        h3.appendChild(document.createTextNode("child"));
        body.appendChild(h3);
    }
   });
  }

exception

jquery.min.js:2 jQuery.Deferred exception: body.appendChild is not a function TypeError: body.appendChild is not a function
    at Jconfirm.onContentReady (http://localhost/NMSCST_CLINIC_INFORMATION_SYSTEM/:154:8)
    at Array.<anonymous> (http://localhost/NMSCST_CLINIC_INFORMATION_SYSTEM/assets/jquery-confirm-v3.3.0/jquery-confirm.min.js:10:6129)
    at j (http://localhost/NMSCST_CLINIC_INFORMATION_SYSTEM/assets/vendor/jquery/jquery.min.js:2:29568)
    at k (http://localhost/NMSCST_CLINIC_INFORMATION_SYSTEM/assets/vendor/jquery/jquery.min.js:2:29882) undefined
r.Deferred.exceptionHook @ jquery.min.js:2

my code doesn't display the child.

What should I do? Please help

Sudhir Bastakoti · Accepted Answer · 2018-03-06T04:06:52.070

1

i guess your selector is not correct in this.$content.find('confirm_body'), if confirm_body is id of element then use #, like,

...
onContentReady:function() {

    var body = this.$content.find('.confirm_body');

    var h3 = document.createElement('h3');
    h3.appendChild(document.createTextNode("child"));
    body.append($(h3)); //make jQuery object for h3 element node & use append
}
...

edited Mar 06 '18 at 04:06

answered Mar 06 '18 at 04:02

Sudhir Bastakoti

99,167
15
158
162

@basaya you need to use .append() instead of appendChild as in my answer above, as body is jQuery object in your case – Sudhir Bastakoti Mar 06 '18 at 04:06
thank you, appendChild doesn't work.. appreciate your correct answer sir – basaya Mar 06 '18 at 04:09

score 1 · Answer 2 · answered Mar 06 '18 at 04:04

1

body is a jQuery object, not a DOM object, so you should use

body.append($(h3));

It would be a good idea to be more consistent as well, to stick to using all jQuery methods, rather than mixing up native DOM elements and jQuery objects.

answered Mar 06 '18 at 04:04

kshetline

12,547
4
37
73

appendChild is not a function using $.confirm()

2 Answers2