Crear tabla HTML desde javascript array

Quiero obtener todas las clases del elemento HTML en mi página, dividirlo y almacenarlo en una matriz. Después de eso, quiero escribirlo en mi tabla en el div con la id “tabla” que ya tengo.

Hasta ahora tengo este código:

var string = $('html').attr('class'); var array = string.split(' '); var arrayLength = parseInt(array.length); for (i=0; i<=arrayLength; i++) { // code } 

¿Me puedes ayudar con el rest?

Por cierto, el elemento HTML tiene las clases de un modernizr.js.

PD: el código es una combinación de JS puro y jQuery. Porque no sé cómo obtener todas las clases del elemento HTML en JS puro. ¿Alguna idea?

Si intentas eliminar jQuery por completo, utiliza esto:

 // Get array of classes without jQuery var array = document.getElementsByTagName('html')[0].className.split(/\s+/); var arrayLength = array.length; var theTable = document.createElement('table'); // Note, don't forget the var keyword! for (var i = 0, tr, td; i < arrayLength; i++) { tr = document.createElement('tr'); td = document.createElement('td'); td.appendChild(document.createTextNode(array[i])); tr.appendChild(td); theTable.appendChild(tr); } document.getElementById('table').appendChild(theTable); 

si ya tienes una tabla en html

 
'+array[i]+'') }

No está claro si desea los nombres de clase por fila o por columna. Estos ejemplos son un nombre de clase por fila. Prueba esto:

 var elm = $('#test'), table = $('').appendTo(elm); $(document.documentElement.className.split(' ').each(function() { table.append(''); });
'+this+'

Usé el código nativo para obtener los classNames del elemento HTML: document.documentElement.className , pero también podría usar $('html').attr('class') .

Un ejemplo JS nativo usando innerHTML:

 var d = window.document, elm = d.getElementById('test'), html = '', classes = d.documentElement.classNames.split(' '), i = 0; for(; classes[i]; i++) { html += ''; } elm.innerHTML = html + '
' + classes[i] + '
;