Question

我正在尝试动态创建div，但我找不到实现它的正确方法。

当我点击一个第一个div时，我想显示一个名为选项的div，其中包含4个其他div。

<div id="mot">mot</div>

<script type="text/javaScript"> 

     $(document).ready(function () {
        $("#mot").click(function () {
        $options= $('<div class="past"/></div><div class="syno"/></div><div class="anto"/></div><div class="trans"/></div>').text('HELLO');
        $('body').append($options);
    });
});

我可以更改为每个div拥有自己的文本而不是所有这些的Hello吗？

另一个问题，然后显示div'选项'我想创建新div，例如，当点击.past时为红色，为.syno为蓝色。我在考虑if / else参数，但我不确定。

所以这些是这个基本代码的几个问题，它可能很容易解决，但我是jquery的初学者。谢谢，

Answer 1

您将关闭div两次：

<div class="past"/></div>
                 ^  ^
            closed two times

使用此代替

$options= $('<div class="past"></div><div class="syno"></div><div class="anto"></div><div class="trans"></div>').text('HELLO');
$('body').append($options);

每次点击div时都会插入一个新div：

$('div').click(function(){
    var actClass = $(this).attr('class');
    if( actClass ){
        $('body').append('<div class="coloredDiv '+actClass+'Color" /div>');
    }
});

并在您的css文件中定义颜色：

.pastColor{
    background-color: red;
}
.synoColor{
    background-color: yellow;
}
.antoColor{
    background-color: green;
}
.transColor{
    background-color: blue;
}

Here你可以找到jsFiddle演示

Answer 2

试试这个......

$(document).ready(function () {
    $("#mot").click(function () {
        var $options = $('<div class="options" />');
        var $past = $('<div class="past" />').text("past");
        var $syno = $('<div class="syno" />').text("syno");
        var $anto = $('<div class="anto" />').text("anto");
        var $trans = $('<div class="trans" />').text("trans");

        $options.append($past)
            .append($syno)
            .append($anto)
            .append($trans);

        $('body').append($options);
    });
});

将其分解为更小的动作（制作更多元素），然后您可以根据需要修改它们，然后再将它们添加到正文中。

注意：创建$option时，您的html格式错误。您正在关闭每个div标记<div />，但随后使用结束div标记</div>关闭它。您只需要一个或另一个 - 此示例代码不会这样做。

Answer 3

你也可以在一行中完成这一切。

$('<div class="past">Hello</div><div class="syno">Goodbye</div><div class="anto">Something else</div><div class="trans">Another thing</div>').appendTo('Body');

这里是小提琴：http://jsfiddle.net/N52DF/

要让创建的div在点击时创建一个新的div，只需使用另一个click（）函数。要将颜色添加到创建的div，请使用jquery＆＃39; s .css（）函数。

$('.past').click(function(){
    $('<div class="option1">Option</div>')
    .appendTo('body')
    .css('background','red');
 });

由于您将动态创建新div，因此他们最初不会绑定任何javascript函数，因此您需要调用函数来绑定click事件。有关示例，请参阅更新的小提琴。

http://jsfiddle.net/N52DF/1/

Answer 4

您可以单独创建四个div，然后点击即可将其附加到正文中。

以下是执行此操作的代码..

var div1 = jQuery('<div/>', {
    text: 'text1'
});
var div2 = jQuery('<div/>', {
    text: 'text2'
});
var div3 = jQuery('<div/>', {
    text: 'text3'
});
var div4 = jQuery('<div/>', {
    text: 'text4'
});

$("#mot").click(function () {

    $('body').append(div1,div2,div3,div4);
});

这是相同的小提琴。

http://jsfiddle.net/murli2308/sy6e2/1/

动态创建的div

4 个答案: