javascript - 使用 Javascript 创建新的 div-tabs

Question

关于如何使用 JavaScript 创建 div，我有一个很大的疑问。在这种情况下，我有选项卡，我希望能够从左侧表单中获得的两个变量中创建一个新的；一个是名称，另一个是内容。示例:http://s2.subirimagenes.com/imagen/previo/thump_8932774captura-de-pantalla.png

函数应该如何从两个变量中创建这个新选项卡？

这是标签的 HTML:

<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>  

和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; 
}

Answer 1

首先，创建新元素:

Best way of creating a new element in jQuery

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

然后，添加内容:

$div.html("some content");

最后，append在您需要的地方新创建的元素。

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