React.render replace container instead of inserting into

You don't need jQuery to work around this issue.

You just need to render into a temporary DIV and extract the content and replace the existing element. I've added the id="destination" so that the element can be easily retrieved from the temporary element.

var Hello = React.createClass({
    render: function() {
        return <div id="destination">Hello {this.props.name}</div>;
    }
});

// temporary render target
var temp = document.createElement("div");
// render
React.render(<Hello name="World" />, temp);
// grab the container
var container = document.getElementById("container");
// and replace the child
container.replaceChild(temp.querySelector("#destination"), document.getElementById("destination"));

Unfortunately there is no way to do that currently with React. It replaces the contents of whatever element you render into.

The best you can do for now is render the React component separately and then mutate the DOM manually to get it where you want it.

I expect the functionality you seek will be available in React before long, but not yet!