title: How to append to dom in React?
body: <p><a href="https://jsfiddle.net/mjmitche/69z2wepo/9973/" rel="noreferrer">Here's a js fiddle</a>  showing the question in action. </p>
  
  <p>In the render function of a component, I render a div with a class <code>.blah</code>. In the <code>componentDidMount</code> function of the same component, I was expecting to be able to select the class <code>.blah</code> and append to it like this (since the component had mounted)</p>
  
  <pre><code>$('.blah').append("&lt;h2&gt;Appended to Blah&lt;/h2&gt;");
  </code></pre>
  
  <p>However, the appended content does not show up. I also tried (shown also in the fiddle) to append in the same way but from a parent component into a subcomponent, with the same result, and also from the subcomponent into the space of the parent component with the same result. My logic for attempting the latter was that one could be more sure that the dom element had been rendered. </p>
  
  <p>At the same time, I was able (in the <code>componentDidMount</code> function) to <code>getDOMNode</code> and append to that </p>
  
  <pre><code> var domnode = this.getDOMNode(); 
   $(domnode).append("&lt;h2&gt;Yeah!&lt;/h2&gt;")
  </code></pre>
  
  <p>yet reasons to do with CSS styling I wished to be able to append to a div with a class that I know. Also, since according to the <a href="https://facebook.github.io/react/docs/component-api.html" rel="noreferrer">docs</a> <code>getDOMNode</code> is deprecated, and it's not possible to use the replacement to <code>getDOMNode</code> to do the same thing </p>
  
  <pre><code> var reactfindDomNode = React.findDOMNode();
   $(reactfindDomNode).append("&lt;h2&gt;doesn't work :(&lt;/h2&gt;");
  </code></pre>
  
  <p>I don't think <code>getDOMNode</code> or <code>findDOMNode</code> is the correct way to do what I'm trying to do.</p>
  
  <p><strong>Question:</strong> Is it possible to append to a specific id or class in React? What approach should I use to accomplish what I'm trying to do (<code>getDOMNode</code> even though it's deprecated?)</p>
  
  <pre><code>var Hello = React.createClass({
      componentDidMount: function(){
  
         $('.blah').append("&lt;h2&gt;Appended to Blah&lt;/h2&gt;");
         $('.pokey').append("&lt;h2&gt;Can I append into sub component?&lt;/h2&gt;");
         var domnode = this.getDOMNode();
         $(domnode).append("&lt;h2&gt;appended to domnode but it's actually deprecated so what do I use instead?&lt;/h2&gt;")
  
         var reactfindDomNode = React.findDOMNode();
         $(reactfindDomNode).append("&lt;h2&gt;can't append to reactfindDomNode&lt;/h2&gt;");
  
      },
      render: function() {
          return (
              &lt;div class='blah'&gt;Hi, why is the h2 not being appended here?
              &lt;SubComponent/&gt;
              &lt;/div&gt;
          )
      }
  });
  
  var SubComponent = React.createClass({
  
        componentDidMount: function(){
           $('.blah').append("&lt;h2&gt;append to div in parent?&lt;/h2&gt;");
        },
  
        render: function(){
           return(
                &lt;div class='pokey'&gt; Hi from Pokey, the h2 from Parent component is not appended here either?            
                &lt;/div&gt;
           )
        }
  })
  
  React.render(&lt;Hello name="World" /&gt;, document.getElementById('container'));
  </code></pre>