javascript - js获取数组中的值显示[object HTMLInputElement]？

问题描述

问 题

我想获取出数组中的值然后显示出来，但是获取出的值显示为[object HTMLInputElement]，

function show(dataList) {
    var uls = document.getElementById('showUl');
    var text = '';
    for (var i = 0; i < dataList.length; i++) {
        text += '<li>' + dataList[i] + '</li>';
    }
    uls.innerHTML = text;
}

显示信息为[object HTMLInputElement]

解决方案

你传进来的是一个dom对象组成的数组，显然，直接用文字拼接的方式对js对象来说不是这么友好

...
text += '<li>' + dataList[i] + '</li>'; // 这里实际操作是dataList[i].toString();
...

你在控制台输出一下就明白了
正确做法： 既然你已经拿到了dom对象，而且js也支持操作dom

function show(dataList) {
    var uls = document.getElementById('showUl'),
        li;
    for (var i = 0; i < dataList.length; i++) {
        // 相当于你创建了一个li，注意这里创建必须放进for循环中，保证每次生成一个新的元素
        li = document.createElement('li');
        // 接下来想li中添加你需要的内容，如果是字符串的话会默认添加一个文本节点的
        li.appendChild(dataList[i]);
        // 接下来把组合好的部件放入uls中
        uls.appendChild(li);
    }
}

这篇关于javascript - js获取数组中的值显示[object HTMLInputElement]？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！