Create form elements dynamically from AJAX

Create form elements dynamically from AJAX

Hello everyone, this is my first post on this forum and I hope you can help... I have a project at work which is to use data taken from one web-page and to dynamically create inputboxes and labels based on this data in another webpage. I am able to take this data and add it to a div container:

var ProductName = ($(data).find('#Name' + id.toString()).text());
            var ProductPrice = ($(data).find('#Price' + id.toString()).text());
            var ProductTotal = ($(data).find('#Total' + id.toString()).text());
            var ProductQty = ($(data).find('#Amount' + id.toString()).text());
            var ProductCode = ($(data).find('#ID' + id.toString()).text());

var nameParagraph = $('<p />').text(ProductName.toString());
            $('#Product').append(nameParagraph);

var codeParagraph = $('<p />').text(ProductCode);
            $('#Product').append(codeParagraph);
           
            var qtyParagraph = $('<p />').text(ProductQty);
            $('#Product').append(qtyParagraph);
           
            var priceParagraph = $('<p />').text(ProductPrice);
            $('#Product').append(priceParagraph);
           
            var totalParagraph = $('<p />').text(ProductTotal);
            $('#Product').append(totalParagraph);

Unfortunately I want to post the data in the Product div not as paragraph data, but as labels and textboxes.

I tried:

var input = document.createElement("input");
            input.setAttribute("id", "name" + id.toString());
            input.value = ProductName;
            body.appendChild(input);

but this did not work. I am very new to JQuery and was put on this project without any training in Javascript...any help would be welcome.

Thank you very much!