Question

我正在开发一个简单的Webpack应用程序，在其中我将重新审视DOM操作技能。我的UI文件中的警报似乎无法正常运行，并且出现以下错误。

 import csv

 AD_AccountsCSV = open("AD_Accounts.csv", "r")
 BA_AccountsCSV = open("BA_Accounts.csv", "r+")

 def Remove(x,y):

            final_list =[]
            for item in x:
                            if item not in y:
                                            final_list.append(item)

            for i in y:
                            if i not in x:
                                            final_list.append(i)
            print (final_list)

我有解决方法，例如某些可以使警报更容易的npm软件包，但是我始终在insertBefore方面遇到问题，我希望对此有所改善。这是有问题的UI文件。它利用了Javascript类，与React不同，我在那里也遇到了insertBefore问题。

ui.js

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at UI.showAlert (http://localhost:8080/build/app.bundle.js:19044:23)
    at http://localhost:8080/build/app.bundle.js:18782:16

ui导出会在 app.js 文件中触发，就像这样...

class UI {
    constructor() {
        this.post = document.querySelector('#posts');
        this.titleInput = document.querySelector('#title');
        this.bodyInput = document.querySelector('#body');
        this.idInput = document.querySelector('#id');
        this.postSubmit = document.querySelector('.post-submit');
        this.forState = 'add';
    }

    showPosts(posts) {

        let output = '';

        posts.forEach((post) => {
            output += `
            <div class="card mb-3">
                <div class="card-body>
                    <h4 class="card-title">${post.title }</h4>
                    <p class="card-text">${post.body }</p>

                    <a href="#" class="edit card-link" data-id="${post.id }">
                        <i class="fa fa-pencil">edit</i>
                    </a>
                    :
                    <a href="#" class="delete card-link" data-id="${post.id }">
                        <i class="fa fa-remove">delete</i>
                    </a>
                </div>
                <br/>
            <div>
            `
        });

        this.post.innerHTML = output;
    }

    showAlert(message, className) {
        this.clearAlert();

        //Create div
        const div = document.createElement('div');
        // Add Classes
        div.className = className;
        // Add Text
        div.appendChild(document.createTextNode(message));
        //Get Parent
        const container = document.querySelector('.postsContainer');
        // Get Posts
        const posts = document.querySelector('#posts');
        // Insert alert div
        container.insertBefore(div, posts);

        //Timeout
        setTimeout(() => {
            this.clearAlert();
        }, 3000)

    }

    clearAlert() {
        const currentAlert = document.querySelector('.alert');

        if (currentAlert) {
            currentAlert.remove();
        }
    }

    clearFields() {
        this.titleInput.value = '';
        this.bodyInput.value = '';
    }
}

export const ui = new UI();

我只是想在app.js文件中提供相关功能，以防万一那里出了点问题并且我没有注意到。我可以肯定这是UI类。我已经将步骤重新排序了几次。但是我很确定触发警报的顺序是执行警报的唯一方法。任何建议将不胜感激。

如何正确使用insertBefore

0 个答案: