Question

I have the following html format

<tr>
    <td width="80%" style="padding-bottom: 3px" class="ms-vb">
        <span class="ms-announcementtitle">
            title is here 1
        </span>
        <br>
        by Ahmed 1
    </td>
</tr>
<tr>
    <td width="80%" style="padding-bottom: 3px" class="ms-vb">
        <span class="ms-announcementtitle">
            title is here 2
        </span>
        <br>
        by Ahmed 2
    </td>
</tr>
<tr>
    <td width="80%" style="padding-bottom: 3px" class="ms-vb">
        <span class="ms-announcementtitle">
            title is here 3
        </span>
        <br>
        by Ahmed 3
    </td>
</tr>

I want to replace text after <br> to be “Created By Admin” i.e. by Ahmed 1 --> Created by Admin and so on…

Answer 1

Rather than manipulate the HTML of parent objects and cause much of the table to get reparsed, you can find and replace that text directly with this code that is a combination of jQuery and plain javascript:

$(".ms-announcementtitle").each(function() {
    $(this).nextAll("br").get(0).nextSibling.nodeValue = "Created By Admin";
});

This finds the spans with class="ms-announcementtitle", then finds the <br> tag following it, then gets the DOM node for that and gets the nextSibling which will be the text node and finally changes it’s text directly.

You can see it work here: http://jsfiddle.net/jfriend00/z5zVT/.

jQuery doesn’t have many functions for dealing with text nodes and because the text you want to replace is not wrapped in it’s own container, it’s best to find the area with jQuery and then use a plain javascript operation to deal with the text node directly rather than modifying the innerHTML of a higher level container which causes everything in the container to be reparsed.

If you control the HTML for this, it would be best to wrap the desired text in a <span class="creator"> and then you can target the contents of just that span in a much more direct way with something like this:

 $(".creator").text("Created by Admin");