Question

我有一个来自createElement的select元素，我希望用带有onchange事件的文本输入元素替换它，但是我的代码不起作用。这是代码（select元素本身附加到也创建的其他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...";
    }
}

这是我想要处理create元素的函数：

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);
        }
    }
}

Answer 1

JSFiddle demo of below code

如果您想要替换问题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或类名，值等。

Javascript：与create element无关的功能

1 个答案: