'Create new div-tabs with Javascript

I have a huge question about how to create div with JavaScript. In this case, I have tabs and I would like to be able to create a new one out of two variable obtained from the form in the left; one for the name and other the content. Example: http://s2.subirimagenes.com/imagen/previo/thump_8932774captura-de-pantalla.png

How should the function be to create this new tab out of the two variables?

This is the HTML of the tabs: 

<div class="w3c">

     <div id="tab16">
         <a href="#tab16">Tab 16</a>
         <div>One might well argue, that...</div>
     </div>

     <div id="tab17">
         <a href="#tab17">Tab 17</a>
         <div>... 30 lines of CSS is rather a lot, and...</div>
     </div>

     <div id="tab18">
         <a href="#tab18">Tab 18</a>
         <div id="Prueba">... that 2 should have been enough, but...</div>
     </div>

</div>

and the CSS:

.w3c { 
    min-height: 250px; 
    position: relative; 
    width: 100%; 
}

.w3c > div { 
   display: inline; 
}

.w3c > div > a { 
   margin-left: -1px; 
   position: relative; 
   left: 1px; 
   text-decoration: none; 
   color: black; 
   background: white; 
   display: block; 
   float: left; 
   padding: 5px 10px; 
   border: 1px solid #ccc; 
   border-bottom: 1px solid white; 
}

.w3c > div:not(:target) > a { 
   border-bottom: 0; 
   background: -moz-linear-gradient(top, white, #eee); 
}   

.w3c > div:target > a { 
   background: white; 
}   

.w3c > div > div { 
   background: white; 
   z-index: -2; 
   left: 0; 
   top: 30px; 
   bottom: 0; 
   right: 0; 
   padding: 20px; 
   border: 1px solid #ccc; 
}   

.w3c > div:not(:target) > div { 
   position: absolute 
}

.w3c > div:target > div { 
   position: absolute; 
   z-index: -1; 
}
javascripthtmlfunctiontabscreateelement


Solution 1:[1]

First of all, create the new element:

Best way of creating a new element in jQuery

var $div = $("<div>", {id: "tabN"});

Then, add the content:

$div.html("some content");

Finally, append the newly created element where you need it.

$(".w3c").append($div);

Solution 2:[2]

The pure-JavaScript-version of BenSorter's jQuery answer:

var div = document.createElement('div');
div.id = "tabN";
div.innerHTML = "some content";
document.querySelector(".w3c").appendChild(div);

Documentation:

Note: The jQuery-free solution above only works in reasonably "modern" browsers, meaning only Internet Explorer 8 and below will not support these methods. In the sad case that you need to support very old IEs, using jQuery will be a lot easier.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 Community

Related Questions