Appending a New Html element inside existing div in react.js

You don't start calling ReactDOM.render function to append elements.

Best practice is to call ReactDOM.render once and let it handle all the handling of appending, changing etc.

This is how you could do it:

ReactDOM.render(<App />,document.getElementById('container'));

class App extends Component {
    render() {
        return (
            <div>
                {cardsData.map(card => {
                    return (<Card {...card} />);
                })}
            </div>
        )
    }
}

class Card extends Component {
    render() {
        return (
            <div>
                card html
            </div>
        )
    }
}

To do it the React way you would dynamically render your content, for this you need to store the data in state and update it when you need to append/remove the elements. After this you can render it using map like

class Employee extends React.Component {
   state = {
      employeeList: [{name: 'user-1', age: '22', company:'abc', url: "https://avatars.githubusercontent.com/u/k8297" }]
   }
   appendData = () => {
        const newData = {name: 's', age: '21', company:'xyz', url: "https://avatars.githubusercontent.com/u/k8297"}
        this.setState(prevState => ({employeeList: [...prevState.employeeList, newData]}))
   }
   render() {
       <div>
           {this.state.employeeList.map(employee => {
                return (
                    <Card key={employee.name} name={employee.name} company={employee.company} url={employee.url}/>
                )
           })}
           <button onClick={this.appendData}>Append</button>
       </div>
   }
}

The ReactRender.DOM will render only one component. In your case, you could create a component called and this components renders actually 2 components:

const Cards = (props) => {
  return (
   <div>
    <Card Key... name... employee.../>
    <Card Key... name... employee... />
  </div>
 )
}

ReactDOM.render(<Cards />, document.getElementById('app'));

EDIT: If you want to render it on click event dynamically, you can create <Cards /> class, set its state to this.state = { cards: [] }

Create buttons with onClick={this.addCard}, create the addCard() function in your Card class that will update the state (cards array).

Finally, use map functon to go throiugh your state.cards and display the returned values in your JSX code.

You can't just "append" in your HTML, you need to go through state manipulation and rendering the JSX according to what the state looks like.