title: Update page to add new link using Greasemonkey
body: <p>JScript does my head in most days, but poorly designed sites do it even more. Foursquare's is one such example in respect of its superusers.</p>
  
  <p><strong>Desired Outcome</strong></p>
  
  <p>A greasemonkey script that will look through each occurrence of the DIV class <em>searchResult</em>, and after the DIV class <em>name</em> append two new A HREF elements similar to these:</p>
  
  <pre><code>&lt;a href="/venue/venueid/edit"&gt;Manage venue&lt;/a&gt; &lt;a href="/edit_venue?vid=venueid"&gt;Edit venue&lt;/a&gt;
  </code></pre>
  
  <p><strong>Scenairo</strong></p>
  
  <p>I would like to make the life of their superusers a little easier using Greasemonkey. The intent is to modify a specific page on the site (<a href="https://foursquare.com/search" rel="nofollow">https://foursquare.com/search</a>), and add a number of extra links to jump directly to specific pages for a venue that would make the workflow faster.</p>
  
  <p>I've looked around for examples of how to do this (learn through reverse engineering), but I get stuck on if I should be using RegEx or something else.</p>
  
  <p><strong>Example</strong></p>
  
  <p>On the search results page (<a href="https://foursquare.com/search?q=dump&amp;near=Perth,%20Australia" rel="nofollow">https://foursquare.com/search?q=dump&amp;near=Perth%2C+Australia</a>), there is a list of venues returned. The code for each venue returned on the search results looks exactly like this:</p>
  
  <pre><code>&lt;div class="searchResult"&gt;
              &lt;div class="icon"&gt;&lt;img src="https://4sqstatic.s3.amazonaws.com/img/categories/parks_outdoors/default-29db364ef4ee480073b12481a294b128.png" class="thumb" /&gt;&lt;/div&gt;
              &lt;div class="info"&gt;
                &lt;div class="name"&gt;&lt;a href="/venue/4884313"&gt;Staff Smoking Spot / Dumpster Dock&lt;/a&gt;&lt;/div&gt;
                &lt;div class="address"&gt;&lt;span class="adr"&gt;&lt;/span&gt;&lt;/div&gt;
  
                &lt;div class="specialoffer"&gt;&lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="extra"&gt;
                &lt;div class="extra-tip"&gt;&lt;div&gt;&lt;a href="/venue/4884313"&gt;0 tips&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
                &lt;div class="extra-checkins"&gt;&lt;div&gt;10 check-ins&lt;/div&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p><strong>Work so far</strong></p>
  
  <p>Looking around for answers, this is what I have come up with (below). Needless to say, it isn't detecting where it needs to insert the A HREF elements at all, and doesn't loop through all of the <em>searchResult</em> elements output on the page, let alone construct the link correctly.</p>
  
  <pre><code>// First version
  var elmNewContent = document.createElement('a');
  elmNewContent.href = sCurrentHost;
  elmNewContent.target = "_blank";
  elmNewContent.appendChild(document.createTextNode('edit venue'));
  var elmName = document.getElementById('name');
  elmName.parentNode.insertBefore(elmNewContent, elmName.nextSibling);
  </code></pre>