Javascript/JQuery to create a div -Simple Way

Question

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

Logard · Accepted Answer · 2012-06-19 09:51:03Z

2

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.

answered Jun 19, 2012 at 9:51

Logard

1,5131 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

U.P · Accepted Answer · 2012-06-19 09:56:15Z

2

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());

edited Jun 19, 2012 at 9:56

answered Jun 19, 2012 at 9:50

U.P

7,4527 gold badges42 silver badges63 bronze badges

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2012-06-19 09:50:18Z

1

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! :)

answered Jun 19, 2012 at 9:50

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Comments

score 1 · Accepted Answer · 2012-06-19 09:56:47Z

1

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);
}

edited Jun 19, 2012 at 9:56

answered Jun 19, 2012 at 9:51

user1432124

Comments

MACMAN · Accepted Answer · 2012-06-19 09:51:20Z

0

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

answered Jun 19, 2012 at 9:51

MACMAN

1,9712 gold badges22 silver badges37 bronze badges

Collectives™ on Stack Overflow

Javascript/JQuery to create a div -Simple Way

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest