Question

我知道是否可以在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>

现在在此选项卡中，我想要覆盖一个新元素

          <div class="tab-content" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>

            <h3>Brown</h3>
            <p>Brown Brown Brown</p>
          </div>

你知道怎么做这个或者你知道一个脚本吗？

谢谢

Answer 1

要向页面添加元素，可以使用jQuery中的append。

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

jQuery Append

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

更新：javascript替代

如果您厌恶jQuery，javascript还会提供一个名为appendChild（）的追加函数。

Node.appendChild（）方法将节点添加到指定父节点的子节点列表的末尾。

javascript Node.appendChild()

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

Answer 2

如果orange标签中还有其他元素，并且您希望在橙色后添加新标题，则最好使用after （http://api.jquery.com/after）像这样：

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

Answer 3

使用append()附加html元素，has()和not()仅在元素不存在时追加。

＆＃13;

$('#append').on('click', () => {
        $('#orange').not(':has(h3)').append('<h3>Brown</h3><p>Brown Brown Brown</p>');
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="productsTabs" style="overflow: auto;">
    <ul class="nav nav-tabs flex-column flex-sm-row" role="tablist"  id="myTab">
        <li class="nav-item">removed PHP code</li>
        <li class="nav-item">Removed PHP code</li>
    </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>
<button id="append">Append Brown</button>

＆＃13;

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

3 个答案:

更新：javascript替代