Динамически добавлять элемент к другому динамически добавленному элементу

Question

Мне нужно динамически добавлять элемент, который также был создан динамически. Я сделал две кнопки. Сначала нужно добавить первый элемент, другой - добавить еще один элемент в ранее созданный элемент. Но я получил ошибку, потому что переменная, созданная в первой функции, не может выполнить вторую функцию (я получил «обертку не определен»).

Что я делаю неправильно?

document.addEventListener("DOMContentLoaded", function() { init(); }, false); 

function init() { 

    textButton = document.getElementById('textButton'); 
    pageButton = document.getElementById('pageButton'); 

    pageButton.addEventListener('click', addPage, false); 
    textButton.addEventListener('click', addTextBlock, false); 

    function addPage() { 
     var newDiv = document.createElement('div'); 
     newDiv.setAttribute('class', 'wrapper'); 
     var wrapper = document.body.appendChild(newDiv); 
    }; 

    function addTextBlock() { 
     wrapper.innerHTML += '<p class="draggable">Text Here!</p>'; 
    }; 

}; 

Answer 1

Вы объявили переменные оболочки внутри функций addPage, поэтому частный к этой функции. Объявите переменную внутри init()

Попробуйте этот

document.addEventListener("DOMContentLoaded", function() { init(); }, false); 

function init() { 
    var wrapper; 
    textButton = document.getElementById('textButton'); 
    pageButton = document.getElementById('pageButton'); 

    pageButton.addEventListener('click', addPage, false); 
    textButton.addEventListener('click', addTextBlock, false); 

    function addPage() { 
     var newDiv = document.createElement('div'); 
     newDiv.setAttribute('class', 'wrapper'); 
     wrapper = document.body.appendChild(newDiv); 
    }; 

    function addTextBlock() { 
     wrapper.innerHTML += '<p class="draggable">Text Here!</p>'; 
    }; 

}; 

Answer 2

Вызвать функцию и добавить его в качестве параметра

function addPage() { 
      var newDiv = document.createElement('div'); 
      newDiv.setAttribute('class', 'wrapper'); 
      var wrapper = document.body.appendChild(newDiv); 
      addTextBlock(wrapper); 
     }; 

     function addTextBlock(a) { 
      a.innerHTML += '<p class="draggable">Text Here!</p>'; 
     }; 

    }; 

Просто чтобы добавить еще немного: обертка в локальной области видимости и могут быть использованы только по функции, в которой она находится. Таким образом, DIV будет добавляться. Когда вы переходите к следующей функции, вы оставляете область действия последней функции, и оболочка больше не доступна. Вы можете объявить var wrapper глобальным, но слишком много глобальных переменных могут стать беспорядочными. В приведенном ниже методе функция addTextBlock принимает один параметр (a) Вы вызываете функцию из области обертки и передаете обертку как (a). Затем это доступно для использования в addTextBlock