Question

dI have a pre-existing block of html I need to alter using jQuery. The HTML looks as follows:

<div class="main">
    <div class="wms-column wms-column-nav">
        <div class="wms-column-nav-body">
        <div class="section">
            <h3>Recent News</h3>
            <ul class="other">
            <li>Something</li>
            </ul>
        </div>
        </div>
    </div>
</div>​

I need to target the H3 and change its inner text. However, with no IDs, targeting it with selectors is tricky. There are many other H3 tags through their site that cannot be changes, but have the same selector path. How can I target this H3 based on its content, and then change it? I’d prefer a method that inserts html and not text, as some special characters are going to be used.

Thanks!

Answer 1

In vanilla Javascript :

var elements = document.getElementsByTagName('h3');
for (var i=elements.length; i-->0; ) {
    var element = elements[i];
    var text = element.textContent || element.innerText;
    if (text=='Recent News') {
       element.innerHTML = 'some new text';   
    }
}

Demonstration