我如何添加自己的 <divs> 动态地添加到容器中？

Question

我找到了很多有关此的信息，但是还没有找到任何可以帮助我的信息。

我的问题是我有一个带其ID的div，它应该是一个容器（ #cont_seguim ）。 我在右侧有一个菜单，其中包含圆圈（由css制成并填充文本），如下所示：

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

其中b和n是背景和文本的格式。 当我单击一个圆圈时，必须将其添加到容器中（注意每个圆圈都有自己的文本），但我无法做到这一点。

我进行了数组处理，并使用alert（）来测试单击是否有效，但是行了，但是append（）甚至无法打印文本，我也不知道为什么。

<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>

谢谢您的反馈！

Answer 1

尝试使用html()而不是text() 。

Answer 2

无法正确理解，希望以下一项对您有所帮助。

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

</script>

确保classname和id名称将保持与html相同

Answer 3

您的代码似乎可以正常工作（ 如果您修复了html vs脚本circulo_menu vs circle_menu使用的其他类名 ）

演示位于http://jsfiddle.net/7jbUj/

---

要添加整个圆圈，请使用.append(this)附加整个元素而不是其文本

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

演示位于http://jsfiddle.net/7jbUj/1/

---

要添加圆圈的副本，以便可以添加多个副本，请首先使用.clone() 。

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

演示位于http://jsfiddle.net/7jbUj/3/

---

在click处理程序内部， this是指clicked元素。 并且由于您将click处理程序绑定在circle_menu元素上， this引用了这一点。 您可以直接将其用于附加，也可以将其克隆以首先进行复制。

Answer 4

试试这个： 演示

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

尝试这个：

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

资源

Answer 6

采用

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

Answer 7

你可以试试

<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>

通过这种方式，单击的圆形元素将添加到div