Can't dynamically add new textbox to <div> tag with javascript

Question

I've been on this for more than a half a day and I can't figure out what I'm missing. I've tried many different iterations and every other solution I could find. It should be a no-brainer. I am using JQueryMobile 1.2 and it's dependencies Here's the javascript (note var counter = 2; is declared above the code:

    $("#btn_addIngredient").click(function () {      
        if (counter > 10) {
            alert("Please limit to 10 ingredients");
            return false;
        }   

        var newIngredientTextBox = $(document.createElement('div')).attr("id", 'div_ingredient' + counter);         

        newIngredientTextBox.after().html('<input type="text" name="ingredient' + counter + 
              '" id="ingredient' + counter + '" value="#' + counter + '" >');

        newIngredientTextBox.appendTo("#allIngredientsDiv"); 
        counter++;

    }); //~ $("#btn_addIngredient")

And the html:

     <div id="IngredientsTextGroup" data-role="fieldcontain">
            <fieldset id="IngredientsFieldset" data-role="controlgroup" data-mini="true">
            <div id="allIngredientsDiv">
                Ingredients
                <div id="div_ingredient1">
                    <input id="ingredient1" value="#1" type="text">
                </div>

                <!-- *** Need to add <div_ingredient2, 3 ...>  -->

            </div>
            <a id="btn_addIngredient" href="#" data-role="button" data-inline="true" data-icon="plus"
                             data-iconpos="left">
                Add Ingredient
            </a>
    <div>

.after().html(str) doesn't make sense. What it really does is set the html of the div to str, .after is skipped over due to it having no html content to append after the element. — user400654
– user400654, Commented Dec 10, 2012 at 21:13

wirey00 · Accepted Answer · 2012-12-10 22:16:27Z

2

You are using .after() wrong.. If you want the element to after your selected element then do this

newIngredientTextBox.after('<input type="text" name="ingredient' + counter + 
          '" id="ingredient' + counter + '" value="#' + counter + '" />');

If you want it to be inside div element then you can use .append()

newIngredientTextBox.append('<input type="text" name="ingredient' + counter + 
          '" id="ingredient' + counter + '" value="#' + counter + '" />');

Also you need to append the element after you add it to the dom.. not before

newIngredientTextBox.appendTo("#allIngredientsDiv").after('<input type="text" name="ingredient' + counter + 
          '" id="ingredient' + counter + '" value="#' + counter + '" />');

edited Dec 10, 2012 at 22:16

answered Dec 10, 2012 at 21:14

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jamie Hutber Over a year ago

my understanding was it was to be after the div :/?

wirey00 Over a year ago

It could have been either actually.. as he used .after() - next and .html() - inside

Jamie Hutber · Accepted Answer · 2012-12-10 21:13:32Z

0

Try

var counter = 2;
var newIngredientTextBox = $(document.createElement('div')).attr("id", 'div_ingredient' + counter);         
console.info(newIngredientTextBox);
newIngredientTextBox.after('<input type="text" name="ingredient' + counter +  '" id="ingredient' + counter + '" value="#' + counter + '" >');

after then added html won't work

answered Dec 10, 2012 at 21:13

Jamie Hutber

28.2k54 gold badges194 silver badges314 bronze badges

1 Comment

codelinguist Over a year ago

Hmmm.. Thanks for your response, @JamieHutber. Still no luck, it seems that either the DOM isn't being refreshed, or I'm missing something that's causing the browser to simply ignore the code. Am I right in thinking the premise of the code is solid? I smell something stupid that I'm doing and can't for the life of me figure out what.

Collectives™ on Stack Overflow

Can't dynamically add new textbox to <div> tag with javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related