Как заменить содержимое элемента div? - PullRequest
Новая
       6

Как заменить содержимое элемента div?

0 голосов
/ 06 сентября 2018

Я хочу добавить более одного элемента в мой контент, которым он должен быть (h1, ввод и некоторые кнопки). Поэтому я написал функцию, в которой я создал h1 и ввод, и теперь я пытаюсь добавить его к своему содержимому div и получил ошибку (TypeError: Невозможно прочитать свойство 'appendChild' из undefined). Вот мой код: 

let el = document.getElementById('add');
if (el) {
    el.addEventListener('click', function () {
        let rootDiv = document.getElementById('content');
        rootDiv.innerHTML = addElement();
    })
}

function addElement() {
    let h = document.createElement("H1");
    let t = document.createTextNode("Add task");
    h.appendChild(t);
    let input = document.createElement('INPUT');
    document.rootDiv.appendChild(h);
    document.rootDiv.appendChild(input);
}

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Нет такого document.rootDiv, на котором можно реализовать appenChild().

Вы можете добавить дочерний элемент непосредственно к элементу контейнера. Вам не нужно устанавливать innerHTML. Просто вызовите функцию.

Чтобы очистить существующий контент, вы можете использовать element.innerHTML = "" до добавления детей. 

let el = document.getElementById('add');;
if (el) {
  el.addEventListener('click', function () {
    addElement();
  });
}

function addElement() {
  let rootDiv = document.getElementById('content')
  rootDiv.innerHTML = "";
  let h = document.createElement("H1");
  let t = document.createTextNode("Add task");
  h.appendChild(t);
  let input = document.createElement('INPUT');
  rootDiv.appendChild(h);
  rootDiv.appendChild(input);
}
<button id="add">Add</button>
<div id="content"> <h1>Simple TODO application</h1> <a href="#addNewItem"><button id="add">Add new task</button></a> <p>TODO is empty</p> <h1></h1> 
</div>
0 голосов
/ 06 сентября 2018 

let el = document.getElementById('add');
if (el) {
  el.addEventListener('click', function() {
    let rootDiv = document.getElementById('content');
    addElement(rootDiv);
  })
}

function addElement(rootDiv) {
  let h = document.createElement("H1");
  let t = document.createTextNode("Add task");
  h.appendChild(t);
  let input = document.createElement('INPUT');
  rootDiv.appendChild(h);
  rootDiv.appendChild(input);
}
<input type="button" id="add" value="Submit" />

<div id="content"></div>

Если вам необходимо постоянно заменять контент новым, а не добавлять, вы можете добавить еще одну функцию для очистки контейнера до addElement. Проверьте этот фрагмент: 

let el = document.getElementById('add');
if (el) {
  el.addEventListener('click', function() {
    let rootDiv = document.getElementById('content');
    clearDiv(rootDiv); // clear container before pasting new content
    addElement(rootDiv);
  })
}

function addElement(rootDiv) {
  let h = document.createElement("H1");
  let t = document.createTextNode("Add task");
  h.appendChild(t);
  let input = document.createElement('INPUT');
  rootDiv.appendChild(h);
  rootDiv.appendChild(input);
}

function clearDiv(div) { // function for clearing rootDiv
    while (div.firstChild) {
        div.removeChild(div.firstChild);
    }
}
<input type="button" id="add" value="Submit" />

<div id="content"></div>
...