Javascript 如何在现有选项卡中引入内容

我知道是否有可能在Boostrap 4中的现有选项卡中引入新元素

 <div id="productsTabs" style="overflow: auto;">
    <ul class="nav nav-tabs flex-column flex-sm-row" role="tablist"  id="myTab">
       <li class="nav-item"><?php echo '<a href="#tab1" role="tab" data-toggle="tab" class="nav-link active">' . OSCOM::getDef('tab_general') . '</a>'; ?></a></li>
       <li class="nav-item"><?php echo '<a href="#tab2" role="tab" data-toggle="tab" class="nav-link">' . OSCOM::getDef('tab_stock'); ?></a></li>
      </ul>
     </ul>
    <div class="tabs">
      <div class="tab-content">

          <div class="tab-content active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p> 
          </div>
          <div class="tab-content" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
          </div>
          <div class="tab-content" id="blue">
            <h1>Blue</h1>
            <p>Blue Blue Blue Blue</p>
          </div>
      </div>
   </div>
</div>

要向页面添加元素，可以使用append from jQuery

.append（）方法将指定的内容作为jQuery集合中每个元素的最后一个子元素插入（要将其作为第一个子元素插入，请使用.prepend（）


如果
orange
选项卡中也有其他元素，并且您希望将新标题附加到橙色标题之后，那么最好在
之后使用
，如下所示：

$('#orange h1').after(
    '<h3>Brown</h3>' + 
    '<p>Brown Brown Brown</p>'
)

$（'#橙色h1'）。之后(
“棕色”+
“棕色
”
)
用于附加html元素，并仅在元素不存在时附加


$（'#append'）。在（'click'，（）=>{
$（“#橙色”）。不（“：has（h3）”）。追加（'BrownBrown-Brown
）；
});


删除了PHP代码
删除了PHP代码

红色
红-红-红-红

橙色
橙橙橙

蓝色
蓝蓝蓝

Append Brown
查看当您说override by a new element时，是要用棕色标题替换橙色标题还是在橙色标题下添加棕色标题？在橙色标题下添加棕色标题
$('#orange').append(
    '<h3>Brown</h3>' + 
    '<p>Brown Brown Brown</p>'
)

var orngTab = document.querySelector("#orange");
var brwnHead = document.createElement("h3");
var brwnPar = document.createElement("p");

brwnHead.innerHTML = "Brown";
brwnPar.innerHTML = "Brown Brown Brown";

orngTab.appendChild(brwnHead);
orngTab.appendChild(brwnPar);

$('#orange h1').after(
    '<h3>Brown</h3>' + 
    '<p>Brown Brown Brown</p>'
)