用JS动态创建HTML

Question

也许这些问题听起来很熟悉，但事实并非如此。 我想在 div 之后从其他文本字段获取值的 append HTML 代码（多行）。 我是 JS 新手，有人能帮我弄清楚如何用 JS 来做吗？ 我想要动态创建相同的代码块。 我试过： innerHTML ， createElement和iframe并且它不起作用（对我来说）。

 function addField(){ //get value from elsewhere var valueCategory =document.getElementById('newCateg').value; //get value from elsewhere var newField=document.getElementById('newField').value; //get value from elsewhere var selOption=document.option[selectedIndex.text]; var newField=document.getElementsByClassName("categories"); }

 <div class="categories"> <p class="titles" > <input type="checkbox" class="check" onchange="checkAll('divID',true,elem)" /> Category Music </p> <hr/> <div class="field"> <input type="checkbox" class="check"/> <label> Rock</label> <input type="text" /> </br> </div> <input type="checkbox" class="check" /> <label>Classical </label> <input type="text" id="c1" /> </br> <input type="checkbox" class="check" /> <label>Rap </label> <input type="text" id="c1" /> </br> <hr/> </div> <div class="categories"> <p class="titles" > <input type="checkbox" class="check" onchange="checkAll('divID',true,elem)" /> Here gets the new category which get VALUE from other text </p> <hr/> <div class="field"> <input type="checkbox" class="check"/> <label> Subcategory..Here gets the VALUE from other text</label> <input type="text" /> </br> </div> <input type="checkbox" class="check" /> <label>Subcategory...Here goes gets VALUE from other text </label> <input type="text" id="c1" /> </br> <input type="checkbox" class="check" /> <label>Subcategory...Here gets the VALUE from other text </label> <input type="text" id="c1" /> </br> <hr/> </div>

Answer 1

好吧，我真的不明白你想要实现什么，但如果你想创建一个获取其他元素值的新字段，请尝试以下操作：

 function addField(){ //Get the others fields values var Rock =document.getElementById("Rock").value; var Classical =document.getElementById("classical").value; var Rap =document.getElementById("Rap").value; //Get the div in wich you will create the new Field. var newField1=document.getElementById("RockCategory"); var newField2=document.getElementById("ClassicalCategory"); var newField3=document.getElementById("RapCategory"); //Create the new Field and give it the others fields values. newField1.innerHTML="Rock: "+Rock; newField2.innerHTML="Classical: "+Classical; newField3.innerHTML="Rap: "+Rap; }

 <div class="categories"> <p class="titles" > <input type="checkbox" class="check" /> Category Music </p> <hr/> <div class="field"> <input type="checkbox" class="check"/> <label> Rock</label> <input type="text" id="Rock"/> </br> </div> <input type="checkbox" class="check" /> <label>Classical </label> <input type="text" id="classical" /> </br> <input type="checkbox" class="check" /> <label>Rap </label> <input type="text" id="Rap" /> </br> <hr/> </div> <input type="button" onclick="addField()" value="AddField"/> <div class="categories"> Music Ctegories: </br> <div id="RockCategory"> </div> </br> <div id="ClassicalCategory"> </div> </br> <div id="RapCategory"> </div> </br> <hr/> </div>

Answer 2

在 jQuery 中，您的代码应如下所示：

$("#secondFieldId").val($("#firstFieldId").val());

或者，如果您希望文本显示在 div 中，请使用以下命令：

$("#divId").html("$("#fieldId").val());

如果你想让它被一个动作触发，让我们在输入字段上说“keydown”，使用这个：

$("#inputFieldId").on("keydown", function(){
    $("#divId").html("$("#fieldId").val());
});

有关 jQuery 的更多信息，请阅读： jQuery 网站