Here's the original HTML:
<div class="chat">
<div class="uploadArea">
...
</div>
<section class="title">
...
</section>
<div class="content">
...
</div>
</div>
I want to render a component between the title and the content. How can I do that?
ReactDOM.render(Component, document.getElementsByClassName("chat")[0]);
wouldn't really work, right?
Create an element which you can use as the container for you react application.
Insert the created element in the position you want, like in this example after the .title element.
Then use the created element in the ReactDOM.render call.
const reactContainer = document.createElement('div');
const target = document.querySelector('.chat .title');
target.after(reactContainer);
ReactDOM.render(Component, reactContainer);
const reactContainer = document.createElement('div');
const target = document.querySelector('.chat .title');
target.after(reactContainer);
const root = createRoot(reactContainer);
root.render(Component);