Javascript HTML中的无效字符阻止我的菜单切换？

我正在创建一个按钮，用于创建一个表格和一个下拉菜单。但是当点击下拉菜单时，它不工作，就像它应该的那样。 我一直收到此错误：“Uncaught InvalidCharacterError:未能对“DOMTokenList”执行“toggle”：提供的标记（“[object HTMLCollection]”）包含HTML空格字符，这些字符在标记中无效。此错误发生在我使用toggle的最后一行附近。 我已经检查了用JS生成的HTML，看起来还不错。我就是搞不清楚这个错误到底指的是什么。我已经对代码进行了至少六次检查，在html中没有看到任何空格。这使我怀疑这是否是问题的真正所在。如果有人对如何纠正这一点有解决方案或见解，我们将不胜感激。 代码如下：

//**HTML**
<div class = 'insertsGrid buttonStyle'>Grid</div>

//**CSS**
.buttonStyle{
    width: 12vh;
    height: 12vh;
    border: 1px solid;
    position: fixed;
    display:flex;
    justify-content:center;
    align-items: center;
    font-weight: 900;
    font-size: 4vh;
    color: #b8860b;
    cursor:pointer;
    background-color:white;
    user-select: none;
}
 th, td, tr {
    border: 1px solid black;
}

//**Javascript**
    const insertsGrid = document.getElementsByClassName('insertsGrid');
   insertsGrid[0].addEventListener('mousedown', createGrid);
let z =0;
function createGrid (){
    z++;
    document.execCommand('insertHTML', true,/*this is the bar */'<div class=bar'+z.toString()+'></div>'+/*this is the menu options that show when bar is clicked */ '<div class =dropDownContent'+z.toString()+'><div class =dropDownContentX'+z.toString()+'><p>Add Row</p><p class=addColumn'+z.toString()+'>Add Column</p></div></div>'+/*this is the table */ '<table><tr><td>Head1</td><td>Head2</td></tr><tr><td></td><td></td></tr></table><br>');
    let bar =   document.getElementsByClassName('bar'+z.toString());
    let dropDownContent = document.getElementsByClassName('dropDownContent'+z.toString());
    let dropDownContentX = document.getElementsByClassName('dropDownContentX'+z.toString());
    let addColumn = document.getElementsByClassName('addColumn'+z.toString());
    //dom css for the html created in the dom
    bar[0].style.width = '10%';
    bar[0].style.height = '1%';
    bar[0].style.border = '1px solid black';
    bar[0].style.cursor = 'pointer';
    bar[0].style.marginBottom = '50px';

    dropDownContent[0].style.display = 'none';
    dropDownContentX[0].style.display = 'inline';
    dropDownContentX[0].style.backgroundColor = 'white';
    dropDownContentX[0].style.width = '100%';
    dropDownContentX[0].style.fontSize = '80%';

    //action executed when the nav button is pressed
    bar[0].addEventListener('mousedown' , tog);
function tog (){
    dropDownContent[0].classList.toggle('dropDownContentX');

    }

//**HTML**
网格
//**CSS**
.钮扣样式{
宽度：12vh；
高度：12vh；
边框：1px实心；
位置：固定；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字号：900；
字体大小：4vh；
颜色：#b8860b；
光标：指针；
背景色：白色；
用户选择：无；
}
th，td，tr{
边框：1px纯黑；
}
//**Javascript**
const insertsGrid=document.getElementsByClassName（'insertsGrid'）；
insertsGrid[0]。addEventListener（'mousedown'，createGrid）；
设z=0；
函数createGrid（）{
z++；
document.execCommand（'insertHTML'，true，/*这是条*/'+/*这是单击条时显示的菜单选项*/'添加行
添加列
'+/*这是表*/'Head1Head2
'）；
设bar=document.getElementsByClassName（'bar'+z.toString（））；
让dropDownContent=document.getElementsByClassName（'dropDownContent'+z.toString（））；
让dropDownContentX=document.getElementsByCassName（'dropDownContentX'+z.toString（））；
让addColumn=document.getElementsByCassName（'addColumn'+z.toString（））；
//在dom中创建的html的dom css
条形图[0]。style.width='10%'；
条形图[0]。style.height='1%'；
条形图[0]。style.border='1px纯黑'；
条形图[0]。style.cursor='pointer'；
条形图[0]。style.marginBottom='50px'；
dropDownContent[0]。style.display='none'；
dropDownContentX[0].style.display='inline'；
dropDownContentX[0].style.backgroundColor='white'；
dropDownContentX[0]。style.width='100%'；
dropDownContentX[0]。style.fontSize='80%'；
//按下导航按钮时执行的操作
条形图[0]。addEventListener（'mousedown'，tog）；
函数tog（）{
dropDownContent[0].classList.toggle（'dropDownContentX'）；
}

您正在将

dropDownContentX

传递到toggle（）方法。这是DOM节点的集合，而不是字符串。toggle（）方法要求CSS类名不带空格。您将错误的数据类型传递到此方法

资料来源：