Question

I have a litle problem and I don’t know how to fix it.

I have an HTML hierarchy like the one here

<ul id="mylist">
    <li id="el_01">
        <div class="title">
            Title Goes Here
            <span class="openClose"></span>
        </div>
    </li>
</ul>

What I like to do is to modify the “Title Goes Here”.

What I have try is :

$('#el_01 title').text('New Title Goes Here');

But that also remove the :

<span class="openClose"></span>

Is there a way to update only the “Title Goes Here” without affect the span element ?

Answer 1

You can edit the text node directly by accessing the DOM element, and getting its firstChild.

$('#el_01 .title')[0].firstChild.data = 'New Title Goes Here';

If there are several .title elements, you can do it in an .each() loop.

$('#el_01 .title').each(function(i,el) {
    el.firstChild.data = 'New Title Goes Here';
});