javascript - 如何在每个按钮单击时在 javascript 中附加新元素

Question

当我单击一个链接时，JS 会向页面添加一个新的文件标签，但每次它都会重新加载所有文件标签。我需要的是，当我点击一个链接时，它应该附加一个文件标签而不重新加载早期的文件标签。

请建议是否有人对此有任何想法。

以下是我的代码。

var intTextBox = 0; 
function addElement() 
{
    intTextBox = intTextBox + 1;
    var contentID = document.getElementById('content');
    contentID.innerHTML = "";
    var howManyTextBoxes = intTextBox;  
    for ( var i = 0; i < howManyTextBoxes; i++) 
    {               
        var newTBDiv = document.createElement('div');           
        newTBDiv.setAttribute('id', 'strText' + intTextBox);
        newTBDiv.innerHTML += "<input type=file name='fileUpload' size='40'/>";                             
        contentID.appendChild(newTBDiv);                        
}

这就是我调用 JS 函数的方式。

    <a href="javascript:addElement();">Attach more files</a>

Answer 1

您应该从该函数返回 false，否则链接会重新加载页面：

function addElement() {
    intTextBox = intTextBox + 1;

    var contentID = document.getElementById('content');
    contentID.innerHTML = "";
    var howManyTextBoxes = intTextBox;  
    for ( var i = 0; i < howManyTextBoxes; i++) {               
    var newTBDiv = document.createElement('div');           
    newTBDiv.setAttribute('id', 'strText' + intTextBox);
    newTBDiv.innerHTML += "<input type=file name='fileUpload' size='40'/>";                             contentID.appendChild(newTBDiv);                            
    return false;
}

Answer 2

你可以这样调用：

<a href="javascript:addElement();return false;">Attach more files</a>

不要忘记return false；