title: Javascript add ID and hash link to new ID
body: <p>I "learned" JavaScript a few months ago but quickly picked up Python and spent the past few months writing programs in that language, so I decided it would be a good idea to go back and actually <em>learn</em> JavaScript. Right now I'm making a very simple "blog" with JS that takes the title of the post, generates a hash link from the post, and creates a <strong>recent posts</strong> section where you can click the link to jump to the post in the page. </p>
  
  <p>For instance, say one of the posts is formatted like this:</p>
  
  <pre><code>&lt;h2 class="post"&gt;Another post for you&lt;/h2&gt;
  &lt;h4&gt;I know you love these&lt;/h4&gt;
  </code></pre>
  
  <p>With multiple posts, and an empty container at the bottom, which will be used to append the recent posts links:</p>
  
  <pre><code>&lt;div id="get-post"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My JS code basically grabs each title with the <code>post</code> class and creates a hash link from the element's title (removing spaces and commas). It then creates and appends a text node consisting of the post title, and then appends the entire link into the <code>get-post</code> container.</p>
  
  <pre><code>var postList = $('#get-post');
  var post = $('.post');
  
  function generateRecentPosts() {
      post.each(function() {
          // Create link from post title that will be used to
          // access that post.
          var postLink = document.createElement('a');
          // Create text node from post title that will be appended
          // to the postLink.
          var text = document.createTextNode($(this).html());
  
          // Add elements to the DOM.
          postLink.href = createLocalLink($(this));
          postLink.appendChild(text);
          postList.append(postLink);
          postList.append('&lt;br /&gt;');
      });
  }
  
  function createLocalLink(elm) {
      // Creates the href link that will be used to go to a blog post.
      // For example, if the title of the elm parameter is "My Post",
      // a link is created called #My-Post that will be used to access
      // that post.
      elm.id = elm.html().replace(/,/g, '').replace(/\s/g, '-');
      console.log(elm.id); // Make sure the ID is added.
      return '#' + elm.id;
  }
  
  generateRecentPosts();
  </code></pre>
  
  <p>My problem is that the links it generates to not point to the ID created for each title. When I click on the link, I can see that it successfully created the href hash <code>#My-Post</code> and added it to the anchor tag, but it doesn't take me to the post title.</p>
  
  <p>Example: <a href="http://jsfiddle.net/samrap/GQtxL/" rel="nofollow">http://jsfiddle.net/samrap/GQtxL/</a></p>
  
  <p>I even added a console log function to make sure the ID is being added to the title as I thought that was the problem, but it isn't because the console is printing the correct new ID. I could really use some help in figuring out where exactly the problem is here.</p>