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');

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.

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 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