Question 45301 in Html Question posted in
Some basic documentation can be found here.

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 2 is not of type 'Node'." – Html

I am trying to add a new textarea onClick for one of my buttons, however, I get the following error:

Uncaught TypeError: Failed to execute ‘insertBefore’ on ‘Node’: parameter 2 is not of type ‘Node’."

HTML:

                <div class="form-group mt-2" id="we">
                    <label for="workField">Work Expereince</label>
                    <textarea
                        placeholder="Enter Text" 
                        class="form-control weField"
                        rows ="3"></textarea>
                </div>

                <div class="container text-center mt-2" id="weAddButton">
                        <button onclick="addNewWeField()" class="btn btn-primary btn-sm">Add</button>
                </div>

JS:

function addNewWeField() {
    let newNode = document.createElement('textarea');
    newNode.classList.add('form-control');
    newNode.classList.add('weField');
    newNode.classList.add("mt-2");
    newNode.setAttribute("rows", 3);
    newNode.setAttribute('placeholder','Text Here')

    let weOb = document.getElementById("we");
    let weAddButtonOb = document.getElementsByTagName('weAddButton');

    weOb.insertBefore(newNode, weAddButtonOb);
}

Any help is appreicated!

Tags:

2

Answers


  1. 0

    It’s because "weAddButtonOb" is an HTMLCollection and not a Node. You probably want to get the id, instead of the tag name just like this:

    function addNewWeField() {
   let newNode = document.createElement('textarea');
   newNode.classList.add('form-control');
   newNode.classList.add('weField');
   newNode.classList.add("mt-2");
   newNode.setAttribute("rows", 3);
   newNode.setAttribute('placeholder','Text Here')

   let weOb = document.getElementById("we");
   let weAddButtonOb = document.getElementById('weAddButton'); /*Return an Element*/

   weOb.insertBefore(newNode, weAddButtonOb);

    }

    You can also check the documentation about "insertBefore()" https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore .

    Login or Signup to reply.
  2. 0

    anyway this code should work

    • #WeAddButton is not child of #we
    • .getElementsByTagName() return NodeList
    function addNewWeField() {
    let newNode = document.createElement('textarea');
    newNode.classList.add('form-control');
    newNode.classList.add('weField');
    newNode.classList.add("mt-2");
    newNode.setAttribute("rows", 3);
    newNode.setAttribute('placeholder','Text Here')

    let weAddButtonOb = document.getElementById('weAddButton');

    weAddButtonOb.before(newNode);
}
                 <div class="form-group mt-2" id="we">
                    <label for="workField">Work Expereince</label>
                    <textarea
                        placeholder="Enter Text" 
                        class="form-control weField"
                        rows ="3"></textarea>
                </div>

                <div class="container text-center mt-2" id="weAddButton">
                        <button onclick="addNewWeField()" class="btn btn-primary btn-sm">Add</button>
                </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search