Question

这里有一些我需要帮助的小问题......

我正在尝试向select / option表单添加多个值，但是当我这样做时，javascript函数最终只会添加最后一个 - 这里是您要查看的详细信息 -

function addFields1(){
    var container = document.getElementById("container1");

    container.appendChild(document.createTextNode("Institution Name: "));

    var name = document.createElement("input");
    name.type = "text";
    name.id = "name";
    name.name = "certificate";
    name.size = 25;
    name.maxlength = 25;
    container.appendChild(name);

    var select = document.createElement("select"); //? how do I fix this up
    var option = document.createElement("option");
    option.value = "College";
    option.innerHTML = "College";
    option.value = "Community College";
    option.innerHTML = "Community College";

    option.value = "High School";
    option.innerHTML = "High School";

    option.value = "Private";
    option.innerHTML = "Private";

    option.value = "University";
    option.innerHTML = "University";

    select.appendChild(option);
    container.appendChild(select);
}

当我调用该函数时，显示的唯一值是最后一个（＆＃34; University＆＃34;） - 当它下降时，其余值甚至不在菜单上。

我遇到的另一个（类似）问题是追加<td>和<input>元素，并且在调用事件处理程序时无法打印任何数据 -

以下是以下代码 -

 function aFields1(){
    var container1 = document.getElementById("container");

    container1.appendChild(document.createTextNode("Company: "));
    var td = document.createElement("td");
    var company = document.createElement("input");
    company.type = "text";
    company.id = "company";
    company.name = "company";
    company.size = 15;
    company.maxlength = 15;
    td.appendChild(company);
    container1.appendChild(td);
    container1.appendChild(company);
}

当我删除td变量和td元素时，信息打印正确，但如果我不这样做，它根本不会显示！我在第二个函数中所做的事情有问题吗？

Answer 1

使用option元素，您实际需要重新运行document.createElement('option')，否则javascript会保留对最初添加的option元素的引用，并仅更新它（而不是附加新元素））。这允许我们重用选项变量。

<td>元素的问题类似......此行container1.appendChild(company);将公司输入元素移到td元素之外并移动到container1元素中。

我已经清理并修复了你的两个功能：

function addFields1() {
    var container = document.getElementById("container1");

    container.appendChild(document.createTextNode("Institution Name: "));

    var name = document.createElement("input");
    name.type = "text";
    name.id = "name";
    name.name = "certificate";
    name.size = 25;
    name.maxlenth = 25;
    container.appendChild(name);

  //create select element and the option variable
    var select = document.createElement("select");
    var option;

  //before each option element we reassign the option variable to a new option element and append it to the select before moving to the next option item
    option = document.createElement("option");    
    option.value = "College";
    option.innerHTML = "College";
    select.appendChild(option);

    option = document.createElement("option");
    option.value = "Community College";
    option.innerHTML = "Community College";
    select.appendChild(option);

    option = document.createElement("option");
    option.value = "High School";
    option.innerHTML = "High School";
    select.appendChild(option);

    option = document.createElement("option");
    option.value = "Private";
    option.innerHTML = "Private";
    select.appendChild(option);

    option = document.createElement("option");
    option.value = "University";
    option.innerHTML = "University";
    select.appendChild(option);

  //finally, we append the completed select element
    container.appendChild(select);
}

function aFields1() {
    var container1 = document.getElementById("container");

    container1.appendChild(document.createTextNode("Company: "));
    var td = document.createElement("td");
    var company = document.createElement("input");
    company.type = "text";
    company.id = "company";
    company.name = "company";
    company.size = 15;
    company.maxlenth = 15;
  //append the company input element to the td element
    td.appendChild(company);
  //append the td element to the container1 element
    container1.appendChild(td);
}

<强> JSFIDDLE DEMO

在javascript中创建元素并将它们附加到DOM

1 个答案: