Test Test
Test Test

Reputation: 2889

Javascript/JQuery to create a div -Simple Way

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

Answers (5)

user1432124
user1432124

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

U.P
U.P

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

MACMAN
MACMAN

Reputation: 1971

You may want to check Jquery where you can access a div using class name.

Upvotes: 0

Logard
Logard

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

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

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

Related Questions