Question

I am updating a corporate site for a client, and I am not allowed to edit their html/css/php. When I need to make small changes, like add or remove from the main nav, I have to use a JS override file and jQuery. Like it or not, this is their system.

I am in need of adding a simple item to an unordered list. Targeting the UL is easy, as the nav wrapper has an ID. I don’t want to use nth:child since they want this new item between two specific other items, which may change. None of the LI tags have classes or IDs. Inside each LI is a link/anchor. I need to be able to pick the list item based on the text of the inner anchor.

<div id="nav">
<ul>
  <li><a href="">Something 1</a></li>
  <li><a href="">Something 2</a></li>
  // Need to insert here, but only because it must go after 
     Something 2, which itself may change positions in the future.
  <li><a href="">Something 3</a></li>
  <li><a href="">Something 4</a></li>
</ul>
</div>

Using jQuery, how can I most safely do this?

Answer 1

This should do what you want..

$('#nav li').filter(function(){
     return $(this).text() == 'Something 2';
}).after('<li><a href="">Something new</a></li>');

---

A more safe way for the comparison would be to trim and convert both string to lowercase.
Additionally you should call your code after the DOMready event

$(function(){
    var existingElement = 'Something 2'.toLowerCase();
    $('#nav li').filter(function(){
         var cleanText = $.trim($(this).text()).toLowerCase();
         return cleanText  == existingElement;
    }).after('<li><a href="">Something new</a></li>');
});