Question

所以基本上我试图重现某种Trello，我想要做的是创建（或克隆）现有的div，然后在按钮之前插入它。是的，我知道，有一种名为＆＃34; .insertBefore（）＆＃34;的方法。但我实际上尝试过，它有效......但是中途。

Blocks are disposed in this way，正如我所说，我想要做的就是当我点击＆＃34;添加类别按钮＆＃34;它克隆div并将其插入按钮之前。我知道，我知道没什么难的。我实际上设法实现了这一目标，但中途：它有效。但只有一次。

我看了检查员发生了什么，我注意到，每当我点击＆＃34;添加类别＆＃34;时，我刚刚克隆的div实际上被div本身取代。所以我只能添加一次，而不是更多。

有我的代码：

＆＃13;

window.onload = function() {
    var board = document.querySelector('#board');
    var model = document.querySelectorAll('#model');

    //creating the block, didn't use .cloneNode()
    var newTask = document.createElement('div');
    newTask.className='newTask';
    newTask.appendChild(document.createElement('p'));
    newTask.querySelector('p').innerHTML = 'New Task';
    newTask.appendChild(document.createElement('i'));
    newTask.querySelector('i').className = 'fa fa-plus';
    var newCategory = document.createElement('div');
    newCategory.className = 'category';
    newCategory.appendChild(newTask);
    /* Look like this :
     * <div class="category">
     *      <div class="newTask">
     *          <p>New Task</p>
     *          <i class="fa fa-plus">
     *      </div>
     * </div>
     */

    var addCategory = document.querySelector('#addCategory');
    addCategory.onclick = function() {
        board.insertBefore(newCategory, addCategory);
    };
};

＆＃13;

<div id="board">
    <div class="category hidden" id="model">
        <div class="newTask">
            <p>New task</p>
            <i class="fa fa-plus" aria-hidden="true"></i>
        </div>
    </div>
    <div class="category">
        <div class="newTask">
            <p>New task</p>
            <i class="fa fa-plus" aria-hidden="true"></i>
        </div>
        <div class="task">
            <h3>Task title</h3>
            <p>This is the description of what we have to do</p>
        </div>
    </div>
    <div class="category" id="addCategory">
        <h3>Add a category</h3>
        <i class="fa fa-plus-circle" aria-hidden="true"></i>            
    </div>
</div>

＆＃13;

所以这就是发生的事情：https://i.neilrichter.com/c7kd3.gif（文件太大抱歉）

你会如何解决这个问题？我忘了提它，但我不允许使用jQuery ......

Answer 1

您只创建一次div（当窗口加载时），然后每次onclick处理程序运行时插入相同的div。

每次onclick处理程序运行时，您需要创建一个新的div：

＆＃13;

window.onload = function() {
    var board = document.querySelector('#board');
    var model = document.querySelectorAll('#model');

    var addCategory = document.querySelector('#addCategory');
    addCategory.onclick = function() {
        var newTask = document.createElement('div');
        newTask.className='newTask';
        newTask.appendChild(document.createElement('p'));
        newTask.querySelector('p').innerHTML = 'New Task';
        newTask.appendChild(document.createElement('i'));
        newTask.querySelector('i').className = 'fa fa-plus';
        var newCategory = document.createElement('div');
        newCategory.className = 'category';
        newCategory.appendChild(newTask);

        board.insertBefore(newCategory, addCategory);
    };
};

＆＃13;

<div id="board">
    <div class="category hidden" id="model">
        <div class="newTask">
            <p>New task</p>
            <i class="fa fa-plus" aria-hidden="true"></i>
        </div>
    </div>
    <div class="category">
        <div class="newTask">
            <p>New task</p>
            <i class="fa fa-plus" aria-hidden="true"></i>
        </div>
        <div class="task">
            <h3>Task title</h3>
            <p>This is the description of what we have to do</p>
        </div>
    </div>
    <div class="category" id="addCategory">
        <h3>Add a category</h3>
        <i class="fa fa-plus-circle" aria-hidden="true"></i>            
    </div>
</div>

＆＃13;

在div的最后一个子元素之前插入

1 个答案: