const el = document.createElement('div');

const heading = document.createElement('h1');

const para1 = document.createElement('p');

const para2 = document.createElement('p');

const button = document.createElement('button');

​

heading.innerText = 'Heading';

para1.innerText = 'Paragraph 1';

para2.innerText = 'Paragraph 2';

button.innerText = 'Button';

​

el.appendChild(heading);

el.appendChild(para1);

el.appendChild(para2);

el.appendChild(button);

​

// fragment.appendChild(el);

document.documentElement.appendChild(el);

const el = document.createElement('div');

const heading = document.createElement('h1');

const para1 = document.createElement('p');

const para2 = document.createElement('p');

const button = document.createElement('button');

const headingText = document.createTextNode('Heading');

const para1Text = document.createTextNode('Paragraph 1');

const para2Text = document.createTextNode('Paragraph 2');

const buttonText = document.createTextNode('Button');

​

heading.appendChild(headingText);

para1.appendChild(para1Text);

para2.appendChild(para2Text);

button.appendChild(buttonText);

​

el.appendChild(heading);

el.appendChild(para1);

el.appendChild(para2);

el.appendChild(button);

​

document.documentElement.appendChild(el);