Question

我需要动态添加动态创建的元素。我做了两个按钮。首先必须添加第一个元素，另一个 - 添加另一个元素到先前创建的元素。但是我得到了一个错误，因为在第一个函数中创建的变量无法达到第二个函数（我得到了＃34;包装器没有定义＆＃34;）。

我做错了什么？

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>';
        };

    };

只是添加更多：wrapper在本地范围内，只能由它所在的函数使用。所以DIV会追加。当您转到下一个函数时，您将离开最后一个函数的范围，并且不再提供包装器。你可以将var wrapper声明为全局，但太多的全局变量可能会变得混乱。在下面的方法中，函数addTextBlock接受一个参数（a）从包装器的范围内调用函数，并将包装器作为（a）传递。然后可以在addTextBlock

中使用它

动态添加元素到另一个动态添加的元素

2 个答案: