pav
9/17/2013 - 12:34 PM

element_prependto_appendto

element_prependto_appendto_html
content_copyfile_download
<html>

<head>

<title>Exercise 3.1</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

<div id='buttonHolder'>
<div id="explanation">
The div you should be adding to is highlighted in blue.
The prepended div should be at the top of that div,
and the appended one, the bottom.
</div>

<button id="changeButton">Run your code!</button>
</div>

<div id="content">



<div id='insertHere' class='highlight'>
<div></div>
<div></div>
</div>

</div>

</body>

</html>
element_prependto_appendto_css
content_copyfile_download
div#buttonHolder {
    padding-bottom:5px;
    border-bottom-color:black;
    border-bottom-style:solid;
    border-bottom-width:1px;
}

div#explanation {
    font-family:Helvetica,Arial,sans-serif;
}


div#content {
    width:300px;
    margin:auto;
}



div#content div {
    min-height:20px;
    margin:10px;
    margin-top:0px;
    
    -webkit-border-radius:10px;
       -moz-border-radius:10px;
            border-radius:10px;
            
    border-color:black;
    border-style:solid;
    border-width:2px;
    
    -webkit-box-shadow: 0px 0px 5px #333;
       -moz-box-shadow: 0px 0px 5px #333;
            box-shadow: 0px 0px 5px #333;
    
}

div#content div:first-child {
    margin-top:10px;
}

div#content > div {
    min-height:80px;
}

div.appended,
div.prepended
{
    background-color:#8FED9F;
}

div#content div.highlight {
    border-color:#1270f3;
    -webkit-box-shadow: 0px 0px 7px #1270f3;
       -moz-box-shadow: 0px 0px 7px #1270f3;
            box-shadow: 0px 0px 7px #1270f3;
}
element_prependto_appendto
content_copyfile_download
$('document').ready(function() {
$('#changeButton').click(function() {

//use $('<div/>') to create two new divs
var $divToAppend = $('<div />');
var $divToPrepend = $('<div />');

//for the presentation and testing of your result
//(so you shouldn't change!)
$divToAppend.html('Append').addClass('appended');
$divToPrepend.html('Prepend').addClass('prepended');


var $divToInsertInside = $('#insertHere');


//append $divToAppend to $divToInsertInside
//using .appendTo
$divToAppend.appendTo($divToInsertInside);

//prepend $divToPrepend to $divToInsertInside
//using .prependTo
$divToPrepend.prependTo($divToInsertInside);


});
});