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

Question

这里有几个小问题需要帮助......

我正在尝试向选择/选项表单添加多个值，但是当我这样做时，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);
}

当我调用该函数时，显示的唯一值是最后一个值(“大学”) - 当菜单下拉时，其余值甚至不在菜单上。

我遇到的另一个(类似)问题是附加 <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