如何使用 div 内的内容定位 div

Question

我有 2 个具有相同 class 名称的 div，但 div 内的字符串不同。 我想在第一个 div 之后使用 insertAfter 来显示一些额外的文本，但是这些文本都显示在两个 div 下：

<div class='test'>First Div</div>
<div class='test'>Second Div</div>

我的做法：

if ( document.getElementsByClassName('test')[0] 
  && document.getElementsByClassName('test')[0].innerHTML == 'First Div'
   ) {
     $('<h2>Inserting New Text</h2>').insertAfter('.test')[0];
   }

但这会在 First Div 和 Second Div 之后添加文本。 我想知道是否有办法只插入一次或匹配字符串后插入

Answer 1

保持简单，找到目标为 class 的所有元素并选择第一个：

 const el = document.getElementsByClassName('test') $('<div>new text</div>').insertAfter(el[0])

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='test'>First Div</div> <div class='test'>Second Div</div>

Answer 2

您可以要求 javascript 查找 class 的元素，然后将结果转换为数组并找到与您的条件匹配的第一个元素。

 const elements = Array.from(document.getElementsByClassName("test")); const target = elements.find(el => el.innerHTML === 'First Div'); $('<h2>Inserting New Text</h2>').insertAfter(target);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='test'>First Div</div> <div class='test'>Second Div</div>

Answer 3

这里不需要 jQuery。 使用insertAdjacentHTML添加新元素。

 // Pick up the first element with the test class const el = document.querySelector('.test'); // Use `insertAdjacentHTML` to add the new div after it el.insertAdjacentHTML('afterend', '<div>new text</div>');

 <div class="test">First Div</div> <div class="test">Second Div</div>