I have the following document in which I designed a kind of "Tabs" to navigate, something like the tabs of any browser where there is always a "+" button to add a tab which is created to the right of the one that is already open and the button "+" always remains at the end no matter how many you create, my code works as follows:
Clicking the "+" button creates a tab in the beforeend of a container to give the appearance that it is generated to the right of the one already created, but the "+" button remains as the 2nd option, my question is how can I fix the "+" button so that it is always at the beforeend of the container (maybe the answer is very simple but I haven't been able to solve it). Thank you
<!-- page content -->
<div class="right_col" role="main">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2 style="padding-top: 5px;"><i class="fa-solid fa-file-invoice-dollar"></i> Cotización</h2>
<div class="clearfix"></div>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="op1-tab" data-toggle="tab" href="#op1" role="tab" aria-controls="op1" aria-selected="true">Opcion 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="Agregar-op"><i class="fa-solid fa-circle-plus"></i></a>
</li>
</ul>
<div class="tab-content" id="tab-content">
<div class="tab-pane active" id="op1" role="tabpanel" aria-labelledby="op1-tab"> <br> <?php include('cotizacion_content.php') ?></div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<script>
$(function () {
$('#myTab li:first-child a').tab('show')
})
$('#Agregar-op').click(function(){
var divs = document.getElementsByClassName("tab-pane").length + 1;
console.log(divs);
var d1 = document.getElementById('myTab');
var d2 = document.getElementById('tab-content');
d1.insertAdjacentHTML('beforeend', '<li class="nav-item"> <a class="nav-link" id="op'+divs+'-tab" data-toggle="tab" href="#op'+divs+'" role="tab" aria-controls="home" aria-selected="true">Opcion '+ divs+'</a> </li>');
d2.insertAdjacentHTML('beforeend', '<div class="tab-pane" id="op'+divs+'" role="tabpanel" aria-labelledby="op'+divs+'-tab"></div>');
})
</script>
</div>
</div>
you can do it with the insertBefore which allows to draw in the doom before a specific element
I think in your specific case this is what you need.
Modify this line:
for this other one:
With this you are invoking the insertAdjacentHTML() method right on the parent element of the link
+
(this.parentElement
), which is an element , incorporating the new element of the new tab into the<li>
DOM in the position you want.<li>
Here is an example snippet with the result (and with a few modifications just to see if the tabs continued to work despite not modifying the following line):
Create a vas tag with the attributes
With this the button will always be stuck in the bot even when you scroll