JavaScript appendChild return null [duplicate]

I’m trying to make a function that switches two divs. Another function adds the first div to where the second div is located and vice-versa. I’m using React and JS.

java.js (functions)

const switchCol = document.querySelectorAll("div");
const ab = document.getElementById("switch_id");
const a = document.getElementById("switchB");
const b = document.getElementById("switchA");

if(ab) {
    ab.addEventListener("click", switchColumns, false);
    a.addEventListener("click", switchA, false);
    a.addEventListener("click", switchB, false);
}

switchCol.forEach(switches => switches.addEventListener('click', switchColumns));
switchCol.forEach(switches => switches.addEventListener('click', switchA));
switchCol.forEach(switches => switches.addEventListener('click', switchB));

const col1 = document.getElementById('column1_id');
const col2 = document.getElementById('column2_id');
const cols1 = document.getElementById('column_one');
const cols2 = document.getElementById('column_two');

let col11 = document.getElementsByClassName('column1');
const col12 = document.getElementsByClassName('column2');
const cols = document.getElementsByClassName('columns');

//switch both divs
function switchColumns(){
    for (let i = 0; i < cols.length; i++){
        col11[i].append(col2);
        col12[i].append(col1);
    }
}

//add div A to div B
function switchA(){
    col12.append(col1);
}

//add div B to div A
function switchB(){
    col11.append(col2);
}

index.js

import "../style.css";
import "./java.js"

class index extends React.Component {
    render()
    {
        return (
            <div className="container">
                <div className="columns" id="columnsToSwitch">
                    <div className="column_one">
                        <div className="column1" id="column1_id">
                            <p>Column1</p>
                        </div>
                        <div className="switchToB" id="switchB">Switch to B</div>
                    </div>
                    <div className="column_two">
                        <div className="column2" id="column2_id">
                            <p>Column 2</p>
                        </div>
                        <div className="switchToA" id="switchA">Switch to A</div>
                    </div>
                </div>
                <div className="switch" id="switch_id">Switch</div>
                <script src="./java.js"/>
            </div>
        );
    }
}

export default index;

When I click on any of the options, this is what I get.

The errors that output after clicking the options