How to insert a textbox into a div that is being created from a loop

Question

0.00/5 (No votes)

See more:

I am using a javascript jquery plugin that creates a select box and an input box. I have it inside a for loop which replicates the select and input box for the amount of times it iterates. What I am trying to do is while it is in the loop for each time the select and input box get created it gets thrown inside a div with a unique id of course.

Below is my explanation and where I am currently at appreciate any help.

What I have tried:

JavaScript

for(i=0; i<Qty; i++)
{
   var newDiv = document.createElement('div'); //created the div for each iteration
   newDiv.id = 'd'+ i; //created a div id for each iteration 
   newDiv.className = 'myClass'; //created a class
   form.render();//this function creates the select box and input box
   /*I am stuck here not exactly sure how I am suppose to take the form.render()
        and place it into the created div.*/

}

Posted 9-Nov-17 4:07am

Member 12645050

Updated 9-Nov-17 7:16am

Add a Solution

Comments

F-ES Sitecore 9-Nov-17 10:13am

So you want people to help you use a function you haven't shown the code for or explained how it works?

Look into using Clone, it's probably easier than what you're doing.

Member 12645050 9-Nov-17 10:19am

Hello I will investigate the clone but even if I wrote the code to create the input and select box I will still be stuck in the same situation in which two boxes are created but not placed into div.

F-ES Sitecore 9-Nov-17 10:22am

You would use "append" or similar. The link I gave has examples of this, and most examples you find that use clone with show something similar as you always need to put the element *somewhere* after cloning it.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2017-11-09T07:16:00

refer this sample

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .myClass{
            width:500px;
            border:1px solid red;
            padding:5px;
        }
        
    </style>
    <title></title>
    
</head>
<body>
    <script>
        var Qty = 5;
        for (i = 0; i < Qty; i++) {
            debugger
            var newDiv = document.createElement('div');
            document.body.appendChild(newDiv);
            newDiv.id = 'd' + i;
            newDiv.className = 'myClass';
            var input = document.createElement('input');
            input.type = "text";
            input.id = "txt" + i;
            newDiv.appendChild(input);
             

            var select = document.createElement("select");
            select.id = "select" + i;
            newDiv.appendChild(select); 
            var items = ["option1", "option2", "option3"];
            for (var j = 0; j < items.length; j++) {
                var option = document.createElement("option");
                option.value = items[j];
                option.text = items[j];
                select.appendChild(option);
            }

        }
    </script>

</body>
</html>

Demo Plunker[^]