How to add a child component to the main component through javascript in Ember Octane

I have a component with a placeholder and button. Whenever this button is clicked I want to instantiate and add a child component to the placeholder div. It’s like adding rows on button click. How do I implement this behaviour.

Here is the pseudo code.

MainCompoent.hbs

<div id="placeHolder>   </div>
<button onClick=> Add </button>

MainCompoent.js
 @action
 clickAdd() {
   //How to initialize Row Component and add to the placeHolder
}

RowComponent.hbs
  <div>    
    <input name>  
    <input age>   
 </div>

I tried something like this but it did not work as expected.

MainComponent.js

@action
addCondition (){       
    document.getElementById("placeholder").innerHTML += `<RowComponent/>`;
}