Jquery - 在元素文本之后追加元素，其中包含多个元素

Question

这不是jQuery - add element after text的副本，因为我要插入的元素除了文本之外还有更多元素，使用 append 将我的元素放在错误的位置。

假设我有很多元素，例如：

<li class="target-line">
    <blablabla></blablabla>
    <div class="known">...</div>
    Element's text
    <...variable element, can't query it to use .before()></...>
    <more elements/>
</li>

我想在Element's text之后插入一个复杂的元素newElement （不是一个我可以写成字符串的Element's text 。

我该怎么做？ 没有 Jquery 的答案是可以的，只要它们很简单。

Answer 1

使用contents()和filter()

 $('.target-line').contents().filter(function() { return this.nodeType === 3 && this.textContent.includes("Element's text") // if text is known }).after('<div>New Element</div>')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="target-line"> <blablabla></blablabla> <div class="known">...</div> Element's text <div class="unknown">...</div> <div class="unknown2">...</div> </li>

Answer 2

解决方案：

使用.nextSibling

用法：

let text = $('.known')[0].nextSibling
$(text).after('<p>New Element</p>')

演示：

 let text = $('.known')[0].nextSibling $(text).after('<p>New Element</p>')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="target-line"> <blablabla></blablabla> <div class="known">...</div> Element's text <div class="unknown">...</div> <div class="unknown2">...</div> </li>

Answer 3

如果文本之前的 div 是已知的，您可以选择它，使用.next()然后在其之前追加：

$rows = $("li.target-line div.known") // get the known div
$afterText = $rows.next() //get the first element after the div
$afterText.before(newElement); //insert your element before that

没有检查如果文本后面没有元素会发生什么。 在这种情况下，总是至少有一个。