How do I append elements to an empty html file using javascript?

Question

For example if I have an html file which is just

<html>


</html>

and I have something like

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

How would I append the div to the empty html file? I have tried doing document.appendChild(div), but that did not work.

Instead of document.appendChild(div) , try use document.documentElement.appendChild(div) — Hans Felix Ramos
– Hans Felix Ramos, Commented Apr 5, 2020 at 4:24
You have a huge mistake there. How is the browser going to know what to display if you don't have the <body> tag? — Mosia Thabo
– Mosia Thabo, Commented Apr 5, 2020 at 4:26

Hans Felix Ramos · Accepted Answer · 2020-04-05 04:23:02Z

3

Get Html element by selector query and apend the div

const div = document.createElement('div');    
const htmlElement = document.querySelector("html");    
htmlElement.appendChild(div)

Or just:

const div = document.createElement('div');  
document.documentElement.appendChild(div);

document.documentElement get the html element

answered Apr 5, 2020 at 4:23

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roko C. Buljan · Accepted Answer · 2020-04-05 10:06:12Z

Use ParentNode.append()

we can do stuff like i.e: myNav.append(EL_logo, EL_list, EL_btn).
Here's a concept I like really much by using a reusable Element constructor:

/**
 * Create new Element helper
 * @param {String} tag Element TagName selector
 * @param {Object} attr Element attributes
 */
const EL = (tag, attr = {}) => Object.assign(document.createElement(tag), attr);

Append Elements to DOM

const EL = (tag, attr = {}) => Object.assign(document.createElement(tag), attr);

const EL_h1  = EL("h1", {
  textContent: "Hello, World!"
});

const EL_btn = EL("button", {
  textContent: "Click me!",
  type: "button",
  style: "color: blue;",
  onclick() {
    alert(this.textContent);
  }
});

document.body.append(EL_h1, EL_btn);

Grouping using DocumentFragment

and appending DocumentFragment

const EL = (tag, attr = {}) => Object.assign(document.createElement(tag), attr);

const EL_a = EL("div", {
  textContent: "Some DIV Lorem ipsum"
});

const EL_b = EL("div", {
  innerHTML: "dolor <b>sit amet</b>"
});

const DF = new DocumentFragment();
DF.append(EL_a, EL_b); // Append to DocumentFragment first
// Here you can still manipulate DF using i.e: DF.querySelectorAll('div');

document.body.append(DF); // Append DocumentFragment

Elements from Array

const EL = (tag, attr = {}) => Object.assign(document.createElement(tag), attr);

// Prepare UL Element
const EL_ul = EL('ul');

// Function for LI Element
const EL_Li = (textContent) => EL('li', {
  textContent,
  onclick( evt ) {
    console.log(this.textContent);
  }
});

const DF_list = new DocumentFragment();
const items = ["Click me!", "Lorem", "Ipsum", "Dolor"];
items.forEach(item => DF_list.append(EL_Li(item)));
EL_ul.append(DF_list);

// Finally append the UL element somewhere
document.body.append(EL_ul);

Collectives™ on Stack Overflow

How do I append elements to an empty html file using javascript?

2 Answers 2

Comments

Append Elements to DOM

Grouping using DocumentFragment

Elements from Array

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Append Elements to DOM

Grouping using DocumentFragment

Elements from Array

Comments

Your Answer

Sign up or log in

Post as a guest

Related