Inserting content inside a div using .append()

Question

I am trying to insert content into a div using a jQuery variable.

What I'm trying to get is this.

<div class="results">
  <div class="user-div">
     <p>Hello world</p>
  </div>
</div>

However it is rendering as:

<div class="results">
  <div class="user-div"></div>'
  <p>Hello world</p>
</div>

The following appears to be the correct syntax. It technically works if I use $('.user-div).append() but I'm trying to use a jQuery variable.

var $results = $('.results');
var $userDiv = $results.append('<div class="user-div"></div>')
$userDiv.append('<p>Hello world</p>');

In this case, the problem isn't appending a div to the DOM, but then also appending elements to that div using jQuery variables. Any suggestions are appreciated.

Possible duplicate of [Creating a div element in jQuery](https://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery) — Murat Seker, Aug 06 '17 at 22:15
I think in this case its slightly different as I was able to create a div, but was unable to append additional elements with a div... however it looks like there are a some answers on there that would apply. — dustink1982, Aug 08 '17 at 01:00

score 2 · Accepted Answer · answered Aug 06 '17 at 22:13

var $results = $('.results');
var $userDiv = $('<div class="user-div"></div>').append('<p>Hello world</p>');
$results.append($userDiv);

You could also select child nodes using the context provided by the first selector:

var $results = $('.results');
$results.append( $('<div class="user-div"></div>');
var $userDiv = $('.user-div', $results); // We select children from the context provided by $results
$userDiv.append('<p>Hello world</p>');

Remember that $() (or, more specific, jQuery()) selects elements already in the DOM (or creates them if they don't exist). It's better to actually handle jQuery objects rather than HTML by itself. Makes it a lot more readable and easy to reference in the long term.

And at the end, I would end up doing something like this (way easier to understand):

var $results = $('.results');
var $userDiv = $('<div class="user-div"></div>');
var $text    = $('<p>Hello world</p>');
$userDiv.append($text);
$results.append($userDiv);

As a sidenote... I never **ever** use the reference provided by `append()` as an object. It would be preferrable to actually `append()` and then grab the reference with a selector `$()`. From a readability perspective of course. — Alejandro Iván, Aug 06 '17 at 22:20
Yup, that did the trick. I had the feeling that I was referencing the wrong object, but wasn't sure which or why. Handling jQuery objects vs. HTML will be a good rule of thumb. Thanks! — dustink1982, Aug 08 '17 at 00:37

score 0 · Answer 2 · answered Aug 06 '17 at 22:19

Because append doesn't return reference to the appended content. It is referring to the same object i.e. results after the first append, or no matter how many appends you would run. So try to use .appendTo()

var $results = $('.results');
var $userDiv = $results.append('<div class="user-div"></div>')
$( "<p>Hello world</p>" ).appendTo( ".user-div" );

Inserting content inside a div using .append()

2 Answers2