javascript - Creating HTML structure and using functions in append -

is there way use function in jquery .append somehow? need this:

$("<tbody>").append(function(){     (i = 0; < test1.length; i++){         test1[i]     } }) 

why okay in case

$("<tr>").append(     $("<th>").append("#"),     $("<th>").append(theaders[1]),     $("<th>").append("tuesday"),     $("<th>").append("wednesday"),     $("<th>").append("thurdsday"),     $("<th>").append("friday"),     $("<th>").append("saturday") ) 

but receive elements without "< th>" in next option:

$("<tr>").append(     $.each(theaders, function(i, d){         $("<th>").append($('<th></th>').text(d));     }) ) 

where

var theaders = ["#", "monday", "tuesday", "wednesday", "thurdsday", "friday", "saturday"]; 

you use js's .map() retrieve every value , template literal `` wrap values in tr tags

es6

var theaders = ["#", "monday", "tuesday", "wednesday", "thurdsday", "friday", "saturday"];    $('thead tr').append( theaders.map(val => `<th>${val}</th>`) );

th{border: 1px solid #ddd;}

<table>    <thead><tr></tr></thead>  </table>    <script src="//code.jquery.com/jquery-3.1.0.js"></script>

or js old fashioned way:

var theaders = ["#", "monday", "tuesday", "wednesday", "thurdsday", "friday", "saturday"];    $('thead tr').append( theaders.map(function(val) { return '<th>'+ val +'</th>'; }) );

th{border: 1px solid #ddd;}

<table>    <thead><tr></tr></thead>  </table>    <script src="//code.jquery.com/jquery-3.1.0.js"></script>

the jquery way trying use - miss sort of .map, return , $element construction like

var theaders = ["#", "monday", "tuesday", "wednesday", "thurdsday", "friday", "saturday"];    $("<tr/>", {    append: theaders.map(function(val){       return $('<th/>', {text: val});    }),    appendto: 'thead'  })

th{border: 1px solid #ddd;}

<table>    <thead></thead>  </table>    <script src="//code.jquery.com/jquery-3.1.0.js"></script>