jQuery .append doesn't work in my function

Question

I am new to javascript and jquery.

I am trying to add html from a javascript function.

To place the contents of y at a specific location I am adding a div tag "Contacts" and trying to append elements to it.

But the contents of "y" are not being displayed.

My code:

componentHtml += "<div id = Contacts>";
var y = [ 1, 2, 3 ];
$("#Contacts").append(y);
componentHtml += "</div>

1) you wrongly assign id to element. 2) Div that you create is not in DOM tree yet. So you need to add this div to DOM tree and after that you will be able to use $('#..."); Although you can create virtual div. — Yuriy Yakym, Apr 17 '16 at 15:37
Unless you `componentHtml` is added to DOM there's no `$("#Contacts")` element available. — u_mulder, Apr 17 '16 at 15:39

GG. · Accepted Answer · 2016-04-17T15:52:36.970

There are several problems with your code.

"<div id = Contacts>" should be '<div id="Contacts">'.
You try to $("#Contacts").append(y); but your div is not in the DOM yet.
You try to append an array of numbers into a div. .append doesn't work like that.

The code below solves those problems:

var contacts = $('<div>', { id: 'Contacts' });

var y = [ 1, 2, 3 ];

var content = y.join();

contacts.html(content);

$('body').append(contacts);

Have a look at .join([separator]) to see different examples of output.

score 2 · Answer 2 · answered Apr 17 '16 at 15:41

componentHtml is just a string at the moment you exec $("#Contacts").append(y);. And as it is just a string - there's no #Contacts element in your DOM. So $("#Contacts") finds nothing.

Simplest solution is use join, for example:

componentHtml += "<div id = Contacts>";
var y = [ 1, 2, 3 ];
componentHtml += y.join("<br />");   // or any other delimiter
componentHtml += "</div>

jQuery .append doesn't work in my function

2 Answers2