You can use g.id = 'desiredId' from your example to set the id of the element you've created.

I like to create the element this way:

    $('<div/>',{
        id: 'idhere',
        css:{
            width: $('#formBox').width(),
            height: $('#formBox').height()
        }
    });

etc...

For reference - some attributes have reserved words/names (see MDN Reserved Words), so if you wanted to specify a class you need to wrap the attribute name:

        $('<div/>',{
            id: 'idhere',
            'class':'myclassname',
            css:{
                width: $('#formBox').width(),
                height: $('#formBox').height()
            }
        });

You can of course assign a name to this new element and change it as you go along...

var div = $('<div/>',{
                id: 'idhere',
                'class':'myclassname',
                css:{
                    width: $('#formBox').width(),
                    height: $('#formBox').height()
                }
            });

$(div).prop('name','saymyname');

use attr function to add id attribute.like this

$jqueryElement.attr('id', 'change_it_to_what_you_want_but_should_be_unique');

You can use append (to add at last position of parent) or prepend (to add at fist position of parent):

$('#parent').append('<div>hello</div>');    
// or
$('<div>hello</div>').appendTo('#parent');

Alternatively, you can use the .html() or .add() as mentioned in a different answer.

You can use g.id = 'desiredId' from your example to set the id of the element you've created.

Here you go with the solution https://jsfiddle.net/7snh10zz/

for (var i = 1; i <= 4; i++) {
    $("body").append("<p id='paragraph" + i + "'>Paragraph " + i + "</p>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

One more way to do it https://jsfiddle.net/7snh10zz/2/

for (var i = 1; i <= 4; i++) {
   $("body").append(document.createElement("p"));
   $("p:last-child").attr('id', 'paragraph' + i).text("Paragraph " + i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I personally think that it's more important for the code to be readable and editable than performant. Whichever one you find easier to look at and it should be the one you choose for above factors. You can write it as:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

And your first Method as:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

But as far as readability goes; the jQuery approach is my favorite. Follow this Helpful jQuery Tricks, Notes, and Best Practices

The issue is because your append() call is on the li itself, not the div you just added. Try this:

var $div = $('<div/>', { 
  'class': 'img-w js-popup' 
});
$('<img/>', { 
  'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80' 
}).appendTo($div)
	
$('<li/>').append($div).append($('<a/>', {
  href: 'delete.php',
  text: 'Delete'
})).appendTo('ul');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>
    <div>
      <img src="//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80" alt="" />
    </div>
    <a href="delete.php">Delete</a>
  </li>
</ul>

With that said, you're using the most verbose method of creating HTML. As you're hard-coding all attributes, it can be simplified by just providing the plain string - or even by just cloning the previous li and appending that.