0

我有一个来自 createElement 的 select 元素，我想用带有 onchange 事件的文本输入元素替换它，但是我的代码不起作用。这是代码（选择元素本身被附加到其他也创建的 div 元素）：

var countess = 0;
function adadd(){
    var child = document.getElementById("geneadd");
    if (child.value === "add"){
        countess++;
        if (countess < 2) {
            var divi=document.createElement("div");
            divi.name = "diviena";
            divi.id = "divienid";
            divi.class = "table";
            var elemdivi = document.getElementById("fieldsetid");
            elemdivi.appendChild(divi);
        }
        var divii=document.createElement("div");
        divii.name = "divienaa" + countess;
        divii.id = "divienidd" + countess;
        var elemdivii = document.getElementById("divienid");
        elemdivii.appendChild(divii);

        var sell=document.createElement("select");
        sell.id = "den3erw" + countess;
        sell.name = "oute3erw" + countess;
        sell.onchange = "lechangefinal()";
        var har = document.getElementById(divii.id);
        har.appendChild(sell);

        var opt=document.createElement("option");
        opt.id = "disept" + countess/*<?php echo $varia; ?>*/;
        opt.value = "";
        var nar = document.getElementById(sell.id);
        sell.appendChild(opt);
        document.getElementById(opt.id).innerHTML="Select Gene...";

        //...more options in between...

        var opta=document.createElement("option");
            opta.id = "other" + countess/*<?php echo $varia; ?>*/;
            opta.value = "other";
            var nari = document.getElementById(sell.id);
            sell.appendChild(opta);
            document.getElementById(opta.id).innerHTML="other...";
    }
}

这是我想在创建元素上工作的功能：

function lechangefinal(){
    for (var iii = 0; iii <= 100; iii++){
        var childi = document.getElementById("den3erw" + iii);
        if (childi.value === "other"){
            parent.removeChild(childi);
            var inpuat=document.createElement("input");
            inpuat.type = "text";
            inpuat.name = "2";
            var elemi=document.getElementById("divienidd" + iii);
            elemi.appendChild(inpuat);
        }
    }
}
4

1 回答 1

1

以下代码的 JSFiddle 演示

对于您想要的更换问题replaceChild

var parent = document.querySelector("#parentID");

var inpuat = document.createElement("input");
inpuat.type = "text";
inpuat.name = "2";

var theSelectToReplace = document.querySelector("#den3erw");

parent.replaceChild(inpuat,theSelectToReplace);

您将不得不根据您的特定需求对其进行定制，但这是将一个元素替换为另一个元素的基本方法。

也是一种无需使用一堆即可一次创建大量 html 的更简洁的方法createElements

全部在一行上（不是很可读）

var parentDiv = document.createElement('div');
parentDiv.innerHTML = '<div class="someclass" id="someid"><select id="myselect"><option value="somevalue">Some value</option><option value="somesecondvalue">Some second value</option></select></div>';

更具可读性，但需要\在最后，每行末尾没有空格或其他任何内容

var parentDiv = document.createElement('div');
parentDiv.innerHTML = '\
   <div class="someclass" id="someid">\
      <select id="myselect">\
         <option value="somevalue">Some value</option>\
         <option value="somesecondvalue">Some second value</option>\
      </select>\
   </div>\
';

或者使用连接来避免不得不使用\和担心枯萎或它后面是否有空格。

var parentDiv = document.createElement('div');
parentDiv.innerHTML = '<div class="someclass" id="someid">'+
      '<select id="myselect">'+
      '<option value="somevalue">Some value</option>'+
      '<option value="somesecondvalue">Some second value</option>'+
      '</select>'+
      '</div>';

只需在需要设置的地方添加连接，例如 id 或类名、值等。

于 2013-08-24T09:59:09.903 回答