Add class and id attributes to HTML tags using javascript

Question

I have written the following code to retrieve xml data which is to be displayed but I wanted to create a tab to store those xml data in it but I have no idea how I can add class and id attributes to the HTML tags using javascript.

What I have come up with, is a simple code like the following.

document.write("<div></div>");
        document.write("<h1><strong>Resources List</strong></h1>");
        document.write("<nav>");

        document.write("<ul>");
        document.write("</ul>");
        document.write("<li ><a href=#tabs-1>Humans</a></li>");
        document.write("<li ><a href=#tabs-2>Machines</a></li>");
        document.write("</ul>");

Answer 1

There are several things wrong with this, and clearly not enough information to provide a solid answer, but in the sack of trying to be helpful, let me start here.

I would suggest using jQuery, while i don't believe it to always be the correct answer, when manipulating the DOM it quite frequently is.

Im not sure what the nav tag was but ill assume you wanted a structure like this.

    <div>
        <h1><strong>Resources List</strong></h1>
        <ul>
            <li ><a href=#tabs-1>Humans</a></li>
            <li ><a href=#tabs-2>Machines</a></li>
        </ul>
    </div>

The most effecient / effective approach i have seen, and used a lot! is

    function (){ // wrapper function, whatever is starting everything
        var $div        = $( document.createElement('div') ),
            $h1         = $( document.createElement('h1') ),
            $ul         = $( document.createElement('div') ),
            $humanLi    = $( document.createElement('li') ),
            $humanA     = $( document.createElement('a') ),
            $machineLi  = $( document.createElement('li') ),
            $machineA   = $( document.createElement('a') ),
            // while this looks like overkill the research i have done suggests this to be the most efficient means of generating DOM elements
            // it also affords you great manipulation ability

            $machineA.attr('href', '#tab1').html('2').click( function(e) {
                // i realize this wasn't in the code you provided but i thought i would demonstrate
                e.preventDefault(); // avoid changing the url on click
            }).appendTo( $machineLi );

            $humanA.attr('href', '#tab1').html('1').click( function(e) {
                // i realize this wasn't in the code you provided but i thought i would demonstrate
                e.preventDefault(); // avoid changing the url on click
            }).appendTo( $humanLi );

            $humanLi.appendTo( $ul );
            $machineLi.appendTo( $ul );

            $h1.appendTo( $div );
            $ul.appendTo( $div );

            $div.addClass( 'new-class' /* this is how you add a class */ ).attr('id', 'new-ID' /* this is how you set an id */ );

            // at this point you inject your structure wherever you want it
            $div.appendTo('body');
            // or
            $div.appendTo(document);
            // or
            $div.appendTo( $(' some selector #content or .main whatever ') );
    }

Answer 2

you should create a fragment or a HTML string first, then you should append it to any element instead of keep creating elements and putting it in somewhere again n again.

And where you are creating the HTML, you can put your id, class right there.

here is an example:

var html = "<div>";
html += "<h1><strong>Resources List</strong></h1>";
html += "<nav>";
html += "<ul>";
html += "<li id='tab1' class='tabs'><a href='#tabs-1'>Humans</a></li>";
html += "<li id='tab2' class='tabs'><a href='#tabs-2'>Machines</a></li>";
html += "</ul>";
html += "</nav>";
html += "</div>";

document.body.innerHTML = html;

jsfiddle: http://jsfiddle.net/ashishanexpert/7h9Zk/1/