Create dynamically HTML with JS

Question

Maybe the questions sounds familiar but it's not. I want to append HTML code (many lines) after div which get value from other text fields. I am new with JS,can sb help me to figure out how to do it with JS? I want the same block of code creating dynamically. I tried: innerHTML , createElement and iframe and it's not working (for me).

 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

Well I don't really understand what do you want to achieve, but if you want to create a new field that gets the value of the others elements, try the following:

 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

in jQuery your code should look like this:

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

or if you want the text to show in a div use this:

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

if you want it to be triggered by an action lets say "keydown" on input field use this:

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

for more information about jQuery read: jQuery site