How to write an element inside a div using jQuery?

Question

How do I write a <div> inside another with jQuery?

I have a <div>that I can not modify in HTML because I am working in a CMS. So I want to write an element (<div>) inside this <div> with a click function.

I already have created the click function, but how do I write with jQuery a <div> INSIDE another specific <div>?

Answer 1

You could select the existing div, and append a new div to it:

$('#OuterDiv').append('<div id="innerDiv"></div>');

Answer 2

Like this:

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

    $(this).append("<div>new div</div>");

});

or this:

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

    var $div = $("<div/>")
                   .attr("id", "div2")
                   .html("new div");

    $(this).append($div);

});

Answer 3

$('.clickaclick').click( function(){    
    $('.parent_div').html('<div />');
});

That should do it, assuming you don't care what's in that .parent_div . There are so many approaches to doing this kind of thing, it'd do you best to read up a bit on jQuery's DOM insertion methods.

http://api.jquery.com/html/

http://api.jquery.com/append/

http://api.jquery.com/appendTo/

http://api.jquery.com/prepend/

http://api.jquery.com/prependTo/

http://api.jquery.com/text/