使用Javascript基于二维属性数组自动生成多个相同类型的html元素会导致浏览器挂起

我创建了2个用于创建DOM元素的函数。第一种方法构建单个元素节点，根据属性/值对数组插入属性，插入文本节点并将元素放入父元素中。除了第二个函数调用它之外，这个函数可以正常工作。

第二个函数调用第一个函数来生成具有相同类型和父元素但具有不同文本和属性的多个元素(用于生成诸如li、option或p元素之类的元素)。该函数的参数是要重复创建的元素的类型、要添加的父元素、包含属性值对的数组的数组，以及用于文本节点的字符串数组(数组的数组和字符串的数组必须具有相同的长度)。创建的元素数量取决于属性数组的数量。

问题是，当第二个函数调用第一个函数时，它似乎挂起了浏览器。

非常感谢您的帮助和建议。

我一直在运行的代码:

function buildElement(type, txt, attr, parent){
    element = document.createElement(type);
    if(typeof attr != 'undefined' && attr){
        for(i=0; i<attr.length; i=i+2){
            element.setAttribute(attr[i], attr[i+1]);
        }
    }
    if(typeof txt != 'undefined' && txt){
        element.appendChild(document.createTextNode(txt));
    }
    if(typeof parent != 'undefined' && parent){
        parent.appendChild(element);
    }
    return element;
}
function multiElements(type, parent, attrs, txts){
    for(i=0; i<attrs.length; i++){
        buildElement(type,txts[i],attrs[i],parent);
    }
}
var x=1;
var local = buildElement('select','','name','local'+x,'onchange',
                                         'selectPhUpdate(this.value)'],newCard);
multiElements('option',
                local,
                [
                    ['value','auck'],
                    ['value','chch'],
                    ['value','dun'],
                    ['value','ham'],
                    ['value','mor'],
                    ['value','nap'],
                    ['value','nply'],
                    ['value','wel']
                ],
                ['Auckland','Christchurch','Dunedin','Hamilton','Morrinsville',
                    'Napier','New Plymouth','Wellington']
);