Question

我在div中有这个代码：

    <div class="user_event my_background">
        <%= image_tag("events_pics/boom.png", :class=> 'event_pic_small') %>
        <h6 class="event_info">Event_1: Frame: 974</h6>
        <a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>
    </div>

我希望每次单击按钮时都将其附加到其他元素中。无论如何，主要的问题是，有一个简单的方法来使用JavaScript创建上面的div？例如，一个函数将其作为参数并创建它？感谢

Answer 1

如果你可以使用jQuery那么

$(".user_event").clone().appendTo("#MyTargetElement");

修改：

我不建议一次又一次地创建div，而是建议你将它隐藏在某个元素中并使用隐藏元素的id获取它并将其附加到目标元素。

<div id="myhiddenelement" style="display:none;"> <div class="user_event my_background"> <%= image_tag("events_pics/boom.png", :class=> 'event_pic_small') %> <h6 class="event_info">Event_1: Frame: 974</h6> <a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a> </div> </div>

的jQuery

("#MyTargetElement").append($("#myhiddenelement").html());

Answer 2

这个简单的Jquery函数会将所选元素中的html设置为你想要的任何内容。

$("SomeElement").html("<div class='user_event my_background'>...</div>")

只需指定要添加html的元素和其余的html作为参数，你就可以了。希望有所帮助。

Answer 3

使用此脚本：

$("body").prepend('<div>').addClass("user_event").addClass("my_background");
function addElement()
{
    $(".user_event.my_background").append('<h6 class="event_info">Event_1: Frame: 974</h6>');
    $(".user_event.my_background").append('<a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>');
}

希望这有帮助！：）

Answer 4

function append_to_what(id)//id can be any css3 selector
{var div=document.createElement('div');
div.innerHTML='<%= image_tag("events_pics/boom.png", :class=> "event_pic_small") %><h6 class="event_info">Event_1: Frame: 974</h6><a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>';
'
div.className='user_event my_background';
document.querySelector(id).appendChild(div);
}

Answer 5

您可能想要检查Jquery，您可以使用类名访问div。

Javascript / JQuery创建一个div -Simple方式

5 个答案: