What we should build DOM

I will say right away that we will not build the whole DOM model, but only consider its elements and how to work with them using jQuery. The article is designed for beginners or those who want to remember how to build elements on the fly, I hope it will be useful for someone.
Most web developers are faced with the need to insert some content from js, maybe it's an ajax or event. But no one thinks that someone might have to work with your code. And often even in very well-known plugins you can find code of this type:

var content = "<table>" for(i=0; i<3; i++){ content += '<tr><td>' + 'result ' + i + '</td></tr>'; } content += "</table>" $('#table').append(content);

It is immediately obvious that this piece of code was made on a fast hand, I once did it myself, but you can do better.
In the article I derived the most basic elements that are used in the development, perhaps they will help you save time.
Under the cut a lot of code with examples.

Here is another interesting option:
')

 function createTable() { $("#dynamicTable").append("<table>"); $("#dynamicTable").append("<caption>My table</caption>"); $("#dynamicTable").append("<thead>"); $("#dynamicTable").append("<tr>"); $("#dynamicTable").append("<th>A</th>"); $("#dynamicTable").append("<th>B</th>"); $("#dynamicTable").append("<th>C</th>"); $("#dynamicTable").append("</tr>"); $("#dynamicTable").append("</thead>"); $("#dynamicTable").append("<tbody>"); .... }

(this is definitely not necessary)

It is difficult to say whether this is a good code or not, but it is clearly unfriendly. All elements can be created from pure Javascript, which is what jQuery does. Therefore, it makes no sense to argue about speed, I did not measure the difference, but it is obvious that it is insignificant, let's move on to the code.

Div

 var mydiv = $('<div/>', { id: 'mydiv', class: 'mydiv', text: ' ' }); $('.content').append(mydiv);

Example output:

 <div class="mydiv" id="mydiv"> </div>

Demo

Form

 var myform = $("<form/>", { action: "/", }).appendTo('.content');

Example output:

 <form action="/"></form>

Demo

Input

 $('<input/>', { id: 'myinput-1', class: 'myinput', type: 'text', name: 'myinput-1', val: 'Habr', css: { 'border': '1px solid red' } }).appendTo(myform);

Could be so:

 $('<input/>').attr({ id: 'myinput-2', class: 'myinput', type: 'text', name: 'myinput-2', placeholder: '...' }).appendTo(myform);

 $('<input/>', { type: 'submit', name: 'send', val: '' }).appendTo(myform);

Example output:

 <form action="/"> <input style="border: 1px solid red;" name="myinput-1" class="myinput" id="myinput-1" type="text"> <input placeholder="..." name="myinput-2" class="myinput" id="myinput-2" type="text"> <input value="" name="send" type="submit"> </form>

Demo

Select

 var myselect = $('<select/>', { id: 'myselect'}); var items = ["Google","Yandex","Bing"]; //  $.each(items,function() { $('<option/>', { val: this, text: this }).appendTo(myselect); }); myselect.val('Yandex'); $('.content').append(myselect);

Example output:

 <select id="myselect"> <option value="Google">Google</option> <option value="Yandex">Yandex</option> <option value="Bing">Bing</option> </select>

Demo

As you can see, everything works well, but where is our favorite selected?
Replace:
myselect.val('Yandex');
on:
$('option[value="Yandex"]', myselect).attr('selected', 'selected');
And everything will work as we are used to, although sometimes the first option is enough

 <select id="myselect"> <option value="Google">Google</option> <option selected="selected" value="Yandex">Yandex</option> <option value="Bing">Bing</option> </select>

Radio

 var myradiodiv = $('<div/>', { id: 'myradiodiv' }).appendTo(".content"); var items = ["Google","Yandex","Bing"]; $.each(items, function(i,item) { $('<label/>').append( $('<input/>', { type: 'radio', name: 'myradio', val: item }) ).append(item).appendTo(myradiodiv); });

Example output:

 <div id="myradiodiv"> <label>Google <input value="Google" name="myradio" type="radio"> </label> <label>Yandex <input value="Yandex" name="myradio" type="radio"> </label> <label>Bing <input value="Bing" name="myradio" type="radio"> </label> </div>

Demo

Button

 var mybutton = $('<button/>', { text: 'Click Me', click: function () { alert('Hello Habr'); } }).appendTo('.content');

Example output:

 <button>Click Me</button>

Iframe

 $('<iframe/>', { name: 'myframe', id: 'myframe', src: 'about:blank' }).appendTo('.content');

Example output:

 <iframe src="about:blank" id="myframe" name="myframe"></iframe>

Table

        
 
 // var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; //  var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); //  // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { //  var DataCell = $('<tr/>'); //   $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); //  ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), //  $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable); 
  : 
 <table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>  
 
  
 var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); //  $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist); 
 <ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul>  
 
  
 $("<script/>",{ src:'js/inc.js' }).appendTo("body"); 
 
  
 $("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last"); 
 
  $('<input/>')       $(''),   . 
   -  /,       . 
 
    github 
 
 UPD :     ,     . , js            . 
    4   100     36. 
      ,      ,     ,  ,  jQuery ,    ,  .



// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);
:
<table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> 


var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist);
<ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> 


$("<script/>",{ src:'js/inc.js' }).appendTo("body");


$("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last");

$('<input/>') $(''), .
- /, .

github

UPD : , . , js .
4 100 36.
, , , , jQuery , , .

        
 
 // var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; //  var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); //  // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { //  var DataCell = $('<tr/>'); //   $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); //  ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), //  $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable); 
  : 
 <table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>  
 
  
 var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); //  $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist); 
 <ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul>  
 
  
 $("<script/>",{ src:'js/inc.js' }).appendTo("body"); 
 
  
 $("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last"); 
 
  $('<input/>')       $(''),   . 
   -  /,       . 
 
    github 
 
 UPD :     ,     . , js            . 
    4   100     36. 
      ,      ,     ,  ,  jQuery ,    ,  .



// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);
:
<table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> 


var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist);
<ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> 


$("<script/>",{ src:'js/inc.js' }).appendTo("body");


$("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last");

$('<input/>') $(''), .
- /, .

github

UPD : , . , js .
4 100 36.
, , , , jQuery , , .

// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable); : <table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist); <ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> $("<script/>",{ src:'js/inc.js' }).appendTo("body"); $("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last"); $('<input/>') $(''), . - /, . github UPD : , . , js . 4 100 36. , , , , jQuery , , .



// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);
:
<table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> 


var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist);
<ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> 


$("<script/>",{ src:'js/inc.js' }).appendTo("body");


$("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last");

$('<input/>') $(''), .
- /, .

github

UPD : , . , js .
4 100 36.
, , , , jQuery , , .

        
 
 // var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; //  var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); //  // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { //  var DataCell = $('<tr/>'); //   $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); //  ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), //  $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable); 
  : 
 <table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>  
 
  
 var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); //  $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist); 
 <ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul>  
 
  
 $("<script/>",{ src:'js/inc.js' }).appendTo("body"); 
 
  
 $("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last"); 
 
  $('<input/>')       $(''),   . 
   -  /,       . 
 
    github 
 
 UPD :     ,     . , js            . 
    4   100     36. 
      ,      ,     ,  ,  jQuery ,    ,  .



// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);
:
<table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> 


var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist);
<ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> 


$("<script/>",{ src:'js/inc.js' }).appendTo("body");


$("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last");

$('<input/>') $(''), .
- /, .

github

UPD : , . , js .
4 100 36.
, , , , jQuery , , .

        
 
 // var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; //  var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); //  // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { //  var DataCell = $('<tr/>'); //   $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); //  ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), //  $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable); 
  : 
 <table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>  
 
  
 var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); //  $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist); 
 <ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul>  
 
  
 $("<script/>",{ src:'js/inc.js' }).appendTo("body"); 
 
  
 $("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last"); 
 
  $('<input/>')       $(''),   . 
   -  /,       . 
 
    github 
 
 UPD :     ,     . , js            . 
    4   100     36. 
      ,      ,     ,  ,  jQuery ,    ,  .



// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);
:
<table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> 


var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist);
<ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> 


$("<script/>",{ src:'js/inc.js' }).appendTo("body");


$("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last");

$('<input/>') $(''), .
- /, .

github

UPD : , . , js .
4 100 36.
, , , , jQuery , , .

// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable); : <table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist); <ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> $("<script/>",{ src:'js/inc.js' }).appendTo("body"); $("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last"); $('<input/>') $(''), . - /, . github UPD : , . , js . 4 100 36. , , , , jQuery , , .



// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);
:
<table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> 


var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist);
<ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> 


$("<script/>",{ src:'js/inc.js' }).appendTo("body");


$("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last");

$('<input/>') $(''), .
- /, .

github

UPD : , . , js .
4 100 36.
, , , , jQuery , , .

        
 
 // var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; //  var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); //  // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { //  var DataCell = $('<tr/>'); //   $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); //  ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), //  $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable); 
  : 
 <table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>  
 
  
 var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); //  $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist); 
 <ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul>  
 
  
 $("<script/>",{ src:'js/inc.js' }).appendTo("body"); 
 
  
 $("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last"); 
 
  $('<input/>')       $(''),   . 
   -  /,       . 
 
    github 
 
 UPD :     ,     . , js            . 
    4   100     36. 
      ,      ,     ,  ,  jQuery ,    ,  .



// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);
:
<table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> 


var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist);
<ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> 


$("<script/>",{ src:'js/inc.js' }).appendTo("body");


$("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last");

$('<input/>') $(''), .
- /, .

github

UPD : , . , js .
4 100 36.
, , , , jQuery , , .

// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable); : <table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist); <ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> $("<script/>",{ src:'js/inc.js' }).appendTo("body"); $("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last"); $('<input/>') $(''), . - /, . github UPD : , . , js . 4 100 36. , , , , jQuery , , .



// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);
:
<table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> 


var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist);
<ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> 


$("<script/>",{ src:'js/inc.js' }).appendTo("body");


$("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last");

$('<input/>') $(''), .
- /, .

github

UPD : , . , js .
4 100 36.
, , , , jQuery , , .

        
 
 // var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; //  var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); //  // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { //  var DataCell = $('<tr/>'); //   $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); //  ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), //  $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable); 
  : 
 <table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>  
 
  
 var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); //  $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist); 
 <ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul>  
 
  
 $("<script/>",{ src:'js/inc.js' }).appendTo("body"); 
 
  
 $("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last"); 
 
  $('<input/>')       $(''),   . 
   -  /,       . 
 
    github 
 
 UPD :     ,     . , js            . 
    4   100     36. 
      ,      ,     ,  ,  jQuery ,    ,  .



// var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; // var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); // // var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); // $.each(TableValue,function() { // var DataCell = $('<tr/>'); // $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); // ( ) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), // $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);
:
<table class="mytable"> <thead> <tr> <th>Site</th> <th>Google</th> <th>Yandex</th> <th>Bing</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>http://habr.ru/</td> <td>4</td><td>6</td> <td>26</td> </tr> <tr> <td>http://habrahabr.ru/</td> <td>3</td> <td>1</td> <td>6</td> </tr> <tr> <td>http://google.ru/</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> 


var lang = ['Russian', 'English', 'Ukraine']; var mylist = $('<ul/>'); // $.each(lang, function() { $('<li/>',{text:this}).appendTo(mylist); // $('<li/>').wrapInner( $("<a/>",{ "href":"#", text:this })) .appendTo(mylist); }); $('.content').append(mylist);
<ul> <li>Russian</li> <li><a href="#">Russian</a></li> <li>English</li> <li><a href="#">English</a></li> <li>Ukraine</li> <li><a href="#">Ukraine</a></li> </ul> 


$("<script/>",{ src:'js/inc.js' }).appendTo("body");


$("<link/>",{ href:'css/inc.css', rel:'stylesheet' }).insertAfter("link:last");

$('<input/>') $(''), .
- /, .

github

UPD : , . , js .
4 100 36.
, , , , jQuery , , .

Source: https://habr.com/ru/post/166109/

All Articles

What we should build DOM

Div

Form

Input

Select

Radio

Button

Iframe

Table

More articles: