Javascript - Creating Elements
FOR IN LOOP
OBJECT.KEYS
OBJECT.ENTRIES
function render(reactElement, containerDOMElement) {
// 1. create the element
const element = document.createElement(reactElement.type);
// 2. Setting the attributes
for (const key in reactElement.props) {
if (reactElement.props.hasOwnProperty(key)) {
element.setAttribute(key, reactElement.props[key]);
}
}
// 3. Set the content
element.textContent = reactElement.children;
containerDOMElement.appendChild(element);
}
const reactElement = {
type: 'a',
props: {
href: 'https://wikipedia.org/',
},
children: 'Read more on Wikipedia',
};
const containerDOMElement =
document.querySelector('#root');
render(reactElement, containerDOMElement);