title: Javascript Error: DOM Exception 8 using jQuery and an Array
body: <p>I am getting this error:</p>
  
  <blockquote>
    <p>Uncaught Error: NOT_FOUND_ERR: DOM
    Exception 8</p>
  </blockquote>
  
  <p>Here is my code (please suggest anything to make it more efficient / cleaner):</p>
  
  <p>Basically this is a button thats adding it's ID to an array called 'keywords':</p>
  
  <pre><code>$('.add').live('click', function() {
      if($(this).text() == "+Add") {
          console.log("add triggered");
          $(this).stop().animate({backgroundColor:'#999d92'}, 300);
          $(this).html("-Rem").fadeIn('fast'); 
          keywords.push($(this).attr("id"));
          $("#response").append(keywords); 
  
      }
      else {
          $(this).stop().animate({backgroundColor:'#cc6633'}, 300);
          $(this).html("+Add").fadeIn('fast'); 
          var index = keywords.indexOf($(this).attr("id"));
          keywords.splice(index, index+1);
          $("#response").append(keywords); 
      }
  
  });
  </code></pre>
  
  <p>What I want to happen is when "+ADD" is pushed the id attribute is added to the array, and when -REM is pushed then remove that id from the keywords.</p>
  
  <p>Any advice would really be a help. When I just append $(this).attr("id") to the response div it does print correctly. I also tried surrounding it with a "String()" function (perhaps it was a reference to the resource and not the actual string?)</p>
  
  <p>Thanks a head of time!</p>