用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 網站