关于appendChild()方法的一个困惑

最新推荐文章于 2021-06-21 14:23:35 发布

小小白前端

最新推荐文章于 2021-06-21 14:23:35 发布

阅读量612

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45347615/article/details/107649182

版权

关于appendChild()方法的一个困惑

<div class="youarepig"></div>
<div class="youarepig"></div>

以上代码是html中的代码

var youarepig = document.querySelectorAll('.youarepig') //获取所以类名为youarepig的标签
    var div = document.createElement('div') //创建div标签
    div.setAttribute('id',"number_cell_"+1+"_"+2);
    div.innerHTML = '哈哈哈哈'; //设置div标签文本值为'哈哈哈哈'
    youarepig.appendChild(div); //将新创建的div标签插到tr标签中

以上代码是js中的代码

预想结果输出应该是页面中出现了id为number_cell_1_2的div标签，但浏览器调试器爆出了youarepig.appendChild is not a function错误，困惑不已，写下博客，待以后解决

querySelectorAll()获取的将会是一个数组，若现给数组添加标签，需要给定下标。

for(i=0;i<youarepig.length;i++){
        var div = document.createElement('div') //创建div标签
        // div.setAttribute('class','number_cell'); //设置标签属性aa=‘td_aa’
        div.setAttribute('id',"number_cell_"+i+"_"+2);
        div.innerHTML = '哈哈哈哈'; //设置div标签文本值为'哈哈哈哈'
        youarepig[i].appendChild(div); //将新创建的div标签插到tr标签中
        console.log(youarepig[i])
    }