How can I add my own <divs> to a container dynamically?

Question

I found a lot of info about this, but I haven't foundanything that could help me yet.

My problem is that I have got a div with its id and it supposes to be a container (#cont_seguim). I have a menu on the right side which contains circles (made by css and filled with text), like following:

<div class="circle_menu b">
    <div class="text_menu n">ECO</div>
</div>

where b and n are the format for background and text. When I click a circle, this one must be added to the container (notice that each circle has got its own text), but I can't get that.

I made and array and used alert() to test that click works, and it does, but append() doesn't even work to print text, and I don't know why.

<script type="text/javascript">
    var arrayS = new Array();

    $(document).ready(function() {
        $(".circulo_menu").click(function() {
            var text = $(this).text();
            alert("calling " + text);
            $("#cont_seguim").append(text);
        });
        return text;
    });

</script>

Thank you for your responses!

Answer 1

Your code seems to work fine (if you fix the different class name used in html vs script circulo_menu vs circle_menu)

Demo at http://jsfiddle.net/7jbUj/

---

To add the whole circle append the whole element and not its text by using .append(this)

    $(".circle_menu").click(function() {
        $("#cont_seguim").append(this);
    });

Demo at http://jsfiddle.net/7jbUj/1/

---

To add a copy of the circle, so you can add multiple of them use the .clone() first..

    $(".circle_menu").click(function() {
        var clone = $(this).clone(false);
        $("#cont_seguim").append(clone);
    });

Demo at http://jsfiddle.net/7jbUj/3/

---

Inside the click handler, this refers to the clicked element. And since you bind the click handler on the circle_menu element, this refers to that. You can use it directly for the appending or clone it to make a copy first..

Answer 2

unable to understand properly, hope below one can help you.

<script type="text/javascript">
      $(document).ready(function() {
        $(".circulo_menu").click(function() {
            var myText = $(this).html(); 
            alert("calling " + myText);
            $("#cont_seguim").html(myText);
        });
    });

</script>

make sure classname and id name will remain same as html

Answer 3

Try using html() instead of text().

Answer 4

Try this: Demo

HTML:

<div class="circle_menu b">
    <div class="text_menu n">ECO</div>
</div>
<div id="cont_seguim"></div>

Javascript:

$(document).ready(function() {
    $(".circle_menu").click(function() {
        var text = $(this).html();
        console.log("calling " + text);
        $("#cont_seguim").append(text);
    });
});

Answer 5

Try this:

$( ".container" ).append( $( "<div>" ) );

source

Answer 6

use

$("#container").append($("<div/>", {id:"newID",text:"sometext"}));

Answer 7

You could try

<script type="text/javascript">
 var arrayS = new Array();

$(document).ready(function() {
    $(".circulo_menu").click(function() {
        var text = $(this).text();
        alert("calling " + text);
        $("#cont_seguim").append($(this).html());
    });
    return text;
});

</script>

By this way the clicked circle element get added to div