Jquery - добавить элемент после текста элемента с несколькими элементами внутри

Question

Это не дубликат jQuery - добавить элемент после текста , потому что элемент, в который я хочу вставить, имеет больше элементов, кроме текста, при использовании команды 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>

И я хочу вставить сложный элемент 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

Не проверял, что может произойти, если после элемента не было элементов текст. В этом случае всегда есть хотя бы один.