How to appendChild() on Jquery selected DOM

Question

I am trying to append child via jQuery to the on of selected HTML element.

My code:

var table = $(this).parent();
console.log(table)
table.appendChild(table_row);

Console:

[table.table.unit-list, prevObject: jQuery.fn.init[1], context: tr] //log
... appendChild is not a function //error

because it's a jquery object use `append()` instead. – GillesC Jul 11 '16 at 11:41 — GillesC, Jul 11 '16 at 11:41

score 7 · Accepted Answer · edited May 23 '17 at 10:30

7

Just use .append()

Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.

table.append(table_row);

Read about Difference between append and appendChild

edited May 23 '17 at 10:30

Community

1
1

answered Jul 11 '16 at 11:41

Amar Singh

5,464
2
26
55

That's the right answer! I will select it as a answer as soon as I can. Thank you. – Jax-p Jul 11 '16 at 11:44

score 2 · Answer 2 · answered Jul 11 '16 at 11:45

You are trying to use pure JavaScript function appendChild with jQuery object.

To append your table use jQuery append table.append(table_row);

OR you can access to pure JavaScript object by getting very first element from jQuery table[0]. So it will be like table[0].appendChild(table_row);

score 0 · Answer 3 · answered Jul 11 '16 at 11:47

0

Since jquery $ function returns "Array" (actually it returns iterate-able object)

you can use

table[0].appendChild(tableRow)

if you want to use appendChild .

answered Jul 11 '16 at 11:47

Ohad Sadan

877
6
15

How to appendChild() on Jquery selected DOM

3 Answers3