Jquery - append element after an element's text with multiple elements inside

Question

This is not a duplicate of jQuery - add element after text, because the element where I want to insert has more elements besides the text, using append places my element in the wrong place.

Suppose I have many elements like:

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

And I want to insert a complex element newElement (not one that I can just write as a string) right after the Element's text.

How can I do it? Answers without Jquery are ok as long as they're simple.

User863 · Accepted Answer · 2020-03-31T06:07:13.587

2

Using contents() and 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>

edited Mar 31 '20 at 06:07

answered Mar 31 '20 at 04:50

User863

19,346
2
17
41

I forgot to mention that "Element's text" varies for each line. But thanks for this – Daniel Möller Mar 31 '20 at 04:54
1

But considering there is only one text node, it would work without `&& this.textContent.includes("Element's text")`. – Daniel Möller Mar 31 '20 at 05:01
1

By the way, wouldn't `nodeType === 3` be better? It's an integer, right? – Daniel Möller Mar 31 '20 at 05:55

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Solution:

Use .nextSibling

Usage:

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

Demo:

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>

Daniel Möller · Answer 3 · 2020-03-31T04:58:58.827

0

If the div before the text is known , you can select it, use .next() and then append before that:

$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

Didn't check what could happen if there were no elements after the text. In this case there is always at least one.

edited Mar 31 '20 at 04:58

answered Mar 31 '20 at 04:53

Daniel Möller

84,878
18
192
214

Jquery - append element after an element's text with multiple elements inside

3 Answers3

Solution:

Usage:

Demo: