Injecting html with jquery only to the first element not its childs

Question

Struggle with a little problem with jquery. I have this html:

<li class="order">
    Order
    <strong>$order->id</strong>
</li>

And I want to change "Order" to "Last order" (This html comes from a plugin and if I change it from the plugin directory the changes won't be save in the next update).

So I decided to change it with jquery html() function. However, if I do

$('.order').html('Last order');

The result is:

<li class="order">
    Last order
</li>

But I don't want to remove also $order->id, since it's dynamic content. My question is if there's a way to exclude it with maybe the strong tag or something? Something like

$('.orde:not(strong)').html("Last order");

Thanks in advance!

Possible duplicate of [How can I change an element's text without changing its child elements?](http://stackoverflow.com/questions/4106809/how-can-i-change-an-elements-text-without-changing-its-child-elements) — insertusernamehere, Aug 10 '16 at 17:25

M.M · Accepted Answer · 2016-08-10T17:39:54.947

How about isolating the children, including the new text and then appending the children again.

Note: the .clone() is irrelevant, since you are not changing the children;

var temp = $('.order').clone().children();
var new_text = "Last Order";
$('.order').html(new_text);
temp.appendTo($('.order'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="order">
    Order
    <strong>$order->id</strong>
</li>

You could also isolate the element, which would be more advisable:

 var el = $('.order')
    var temp = el.clone().children();
    var new_text = "Last Order";
    el.html(new_text);
    temp.appendTo(el);

If you want a simple function for this:

function change_text(el, new_text){
    var temp = el.clone().children();
    el.html(new_text);
    temp.appendTo(el);
}

Injecting html with jquery only to the first element not its childs

1 Answers1