Reputation: 2889
I have this code in a 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>
and I want this to be appended into an other element each time I click on a button. Anyway the main question is, Is there an easy way to create the above div using javascript? for example a function that takes that as an argument and creates it? Thanks
Upvotes: 0
Views: 459
Reputation:
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);
}
Upvotes: 1
Reputation: 7442
If you can use jQuery then
$(".user_event").clone().appendTo("#MyTargetElement");
Edit:
Instead of creating a the div again and again, I'd recommend that you keep it hidden in some element and get it using that hidden element's id and append it to your target element.
<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());
Upvotes: 2
Reputation: 1971
You may want to check Jquery where you can access a div using class name.
Upvotes: 0
Reputation: 1513
This simple Jquery function will set the html inside the element selected to whatever you want.
$("SomeElement").html("<div class='user_event my_background'>...</div>")
Just specify the element you want to add the html to and the rest of you html as the argument and you are good to go. Hope that helps.
Upvotes: 2
Reputation: 167192
Use this script:
$("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>');
}
Hope this helps! :)
Upvotes: 1