Как добавить элементы в пустой файл html, используя javascript? - PullRequest
Новая
       0

Как добавить элементы в пустой файл html, используя javascript?

0 голосов
/ 05 апреля 2020

Например, если у меня есть файл html, который просто 

<html>


</html>

, и у меня есть что-то вроде 

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

Как мне добавить div к пустому html файл? Я попытался сделать document.appendChild (div), но это не сработало.

Ответы [ 2 ]

3 голосов
/ 05 апреля 2020

Получить Html элемент по запросу селектора и добавить div 

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

Или просто: 

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

document.documentElement получить элемент html

1 голос
/ 05 апреля 2020

Используйте ParentNode.append()

мы можем сделать что-то вроде, например: myNav.append(EL_logo, EL_list, EL_btn).
Вот концепция, которая мне очень нравится, используя многократно используемый конструктор Element: 

/**
 * 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);

Добавление элементов в 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);

Группировка с использованием DocumentFragment

и добавление 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

Элементы из массива 

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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...