title: Ajax success callback- DOM not updating
body: <p>I am running a <code>$.ajax</code> function. The data I want is successfully returned in json format, and I am able to parse it and get the properties I want. Then, when I try to change the DOM, it isn't changing. <code>console.log()</code> statements show things changing, but when I view the source of the page the original element is still there.</p>
  
  <p>Code:</p>
  
  <pre><code>$.ajax({
      success: function (jsonImageString) {
          if (jsonImageString.length &gt; 0) {
              var embeddedImages = $.parseJSON(jsonImageString);                        
  
              $.each(embeddedImages, function () {
                  var currPin = this.pin;
                  var currUrl = this.url;
                  var currTitle = this.title;
  
                  //statement displays correct pin
                  console.log(currPin);
  
                  //statement shows correct original html
                  console.log($("a[href='" + currPin + "']").html());
  
                  //nothing changes- viewing source of page shows original elements
                  $("a[href='" + currPin + "']")
                      .addClass("displayLink")
                      .html("&lt;img src='" + currUrl + "' alt='" + currTitle + "' /&gt;");
  
                      //shows what would be if something had actually changed...
                      console.log($("a[href='" + currPin + "']")[0].outerHTML);
                  });
  
              }
          }
      });
  </code></pre>