How to create an element with levels and then add elements in one of its sublevels with jquery?

Question

I need to create the object with the structure below and insert options.

 myElem = $("<div class='row'> <div class='form-group'> <label for='multiple-selected' class='col-md-offset-1 col-md-2 control-label'>Teste</label> <div class='col-md-5'><select id='multiple-selected' multiple='multiple'></div> </div> </div>");

And then insert option into that object. I don’t want to concatenate plain text (by mounting html in hand). Can you do this with append? I thought appendTo() but the object has not yet been inserted into html someone would have a hint?

Answer 1

Even without the element being inserted in the DOM you can use jQuery methods.

Forehead with var $select = myElem.find('select');

var myElem = $("<div class='row'> <div class='form-group'> <label for='multiple-selected' class='col-md-offset-1 col-md-2 control-label'>Teste</label> <div class='col-md-5'><select id='multiple-selected' multiple='multiple'></div> </div> </div>");
var $select = myElem.find('select');
console.log($select); // dá [select#multiple-selected, prevObject: jQuery.fn.init[1], context: undefined, selector: "select"]