Tag: append
Nabin Nepal (Starx) append html jquery
July 5, 2013

Strange append issue

Slim’s Question:

SlimSlim

I have this code:

HTML:

<div class="formElement" id="debtors">
    <label> Debtors</label>
    <input type="text" name="debtors">
    <button id="btnClicker" onclick="test()">Append list items</button>
</div>

and jquery:

test= function(){
    var clicked = 0;
    $("#btnClicker").click(function(){
        clicked++;
        $("#debtors").append("<input type="text" name="test"+clicked+"" value="test" />");
      });                       
};

JS fiddle here

The problem is that when the function is executed the input box is not shown at the 1st click and after the 2nd click there are 2 input boxes added and after few more clicks the boxes are duplicated for a strange reason. I tried almost everything that I found online, but it seems that I’m still new in jquery. I’m opretty sure that I’m missing something small. Do you have any fix ideas?

user1671639user1671639

You can also remove the .click() from your JS code

test = function () {
    var clicked = 0;
    clicked++;
    $("#debtors").append("<input type="text" name="test" + clicked + "" value="test" />");
}

or remove onclick="test" and keep you .click() script.

To know reason check jQuery.click() vs onClick.

StarxStarx

Because your event handler does not applies until the user clicks at the button. The onclick="test()" on your code execute the function test() which later holds event handler.

You do not need a function on variable test just remove them.

var clicked = 0;
$("#btnClicker").click(function(){
    clicked++;
    $("#debtors").append("<input type="text" name="test"+clicked+"" value="test" />");
});

Demo

Nabin Nepal (Starx) append javascript jquery selector variables
February 27, 2013

loop the .append() with selector as variable

Question by user2108245

user2108245user2108245

I am trying to loop the .append() function in order to change the selector each time with different value. But, I don’t know the syntax for the selector in order to meet my target. So, how to change it? Thanks so much!
Ka Ho

<script type="text/javascript">
var a=3;
for (var i=0;i<a;i++)                       {                           
$i.append(i);
}
</script>

<div class="0"></div> // expected: display 0
<div class="1"></div> // expected: display 1
<div class="2"></div> // expected: display 2

Answer by Starx

StarxStarx

First of all numeric class and ids are not supported that much as you think it is.

Update your HTML to something like this

<div class="box-0"></div>
<div class="box-1"></div>
<div class="box-2"></div>

Then you can use the script provided by deadlock in his answer.

var a=3;
for (var i=0;i<a;i++) {                           
    $(".box-"+i).append(i); //this is what you need
}
Nabin Nepal (Starx) append div document-body jquery
July 17, 2010

Dynamically adding a div element in jquery

Question by Chendur Pandian

Chendur PandianChendur Pandian

I use the following function to show a status message after a form submit from my asp.net page.. The function gets called but it(alertmsg div) doesn’t seem to show up why?

 function topBar(message) {
        var $alertdiv = $('<div id = "alertmsg"/>');
        $alertdiv.text(message);
        alert($alertdiv);
        alert($alertdiv.text(message));
        $alertdiv.click(function() {
            $(this).slideUp(200);
        });
        $(document.body).append($alertdiv);
        setTimeout(function() { $alertdiv.slideUp(200) }, 5000);
    }

What happens is both the alert statements show [Object object]… I think both need to show different outputs… Any suggestion..

css:

#alertmsg
{
  font-family:Arial,Helvetica,sans-serif;
   font-size:135%;
   font-weight:bold;
  overflow: hidden;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #404a58;
  height: 0;
  color: #FFFFFF;
  font: 20px/40px arial, sans-serif;
  opacity: .9;
}

Answer by Jim Schubert

Jim SchubertJim Schubert

You’re alerting the jQuery object. Try changing your alert to:
alert($alertdiv.get(0).innerText);

Other than that, your div may not be showing because you’re adding the click event before you add the div element to the page.

Try changing:

$alertdiv.click(function() {
            $(this).slideUp(200);
        });

To:

$alertdiv.bind('click', function() {
            $(this).slideUp(200);
        });

or even:

$alertdiv.live('click', function() {
            $(this).slideUp(200);
        });

I think this may be the only way to bind dynamically generated elements. I’ve never tried .click() outside of the document ready function.

Edit:
In addition to the above suggestion for jQuery, your css should be changed to specify a height for the div. Your height of 0 will cause it to render, technically, and possibly slide up. But, you won’t be able to see it because it is 0 pixels tall at point 0,0.

Answer by Starx

StarxStarx

To insert a <div> dynamically you can use this

$('<div>Test</div>').insertAfter('.inner'); //to insert after an element with class inner

or better

$("#myparent").html("<div id='mynewdiv'>hi</div>");
...

Please fill the form - I will response as fast as I can!