[英]How can I add my own <divs> to a container dynamically?
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
). 我的问题是我有一个带其ID的div,它应该是一个容器( #cont_seguim
)。 I have a menu on the right side which contains circles (made by css and filled with text), like following: 我在右侧有一个菜单,其中包含圆圈(由css制成并填充文本),如下所示:
<div class="circle_menu b">
<div class="text_menu n">ECO</div>
</div>
where b and n are the format for background and text. 其中b和n是背景和文本的格式。 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. 我进行了数组处理,并使用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>
Thank you for your responses! 谢谢您的反馈!
尝试使用html()
而不是text()
。
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 确保classname和id名称将保持与html相同
Your code seems to work fine ( if you fix the different class name used in html vs script circulo_menu
vs circle_menu
) 您的代码似乎可以正常工作( 如果您修复了html vs脚本circulo_menu
vs circle_menu
使用的其他类名 )
Demo at http://jsfiddle.net/7jbUj/ 演示位于http://jsfiddle.net/7jbUj/
To add the whole circle append the whole element and not its text by using .append(this)
要添加整个圆圈,请使用.append(this)
附加整个元素而不是其文本
$(".circle_menu").click(function() {
$("#cont_seguim").append(this);
});
Demo at http://jsfiddle.net/7jbUj/1/ 演示位于http://jsfiddle.net/7jbUj/1/
To add a copy of the circle, so you can add multiple of them use the .clone()
first.. 要添加圆圈的副本,以便可以添加多个副本,请首先使用.clone()
。
$(".circle_menu").click(function() {
var clone = $(this).clone(false);
$("#cont_seguim").append(clone);
});
Demo at http://jsfiddle.net/7jbUj/3/ 演示位于http://jsfiddle.net/7jbUj/3/
Inside the click
handler, this
refers to the clicked element. 在click
处理程序内部, this
是指clicked元素。 And since you bind the click
handler on the circle_menu
element, this
refers to that. 并且由于您将click
处理程序绑定在circle_menu
元素上, this
引用了这一点。 You can use it directly for the appending or clone it to make a copy first.. 您可以直接将其用于附加,也可以将其克隆以首先进行复制。
HTML: HTML:
<div class="circle_menu b">
<div class="text_menu n">ECO</div>
</div>
<div id="cont_seguim"></div>
Javascript: Javascript:
$(document).ready(function() {
$(".circle_menu").click(function() {
var text = $(this).html();
console.log("calling " + text);
$("#cont_seguim").append(text);
});
});
采用
$("#container").append($("<div/>", {id:"newID",text:"sometext"}));
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 通过这种方式,单击的圆形元素将添加到div
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.