pav
9/16/2013 - 7:43 PM

implicit_element_creation

implicit_element_creation_html
content_copyfile_download
<html>

<head>

<title>Exercise 2.5</title>

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

</head>

<body>

<button id="changeButton">Click to run your code!</button>

<div id='content'>

<div id="header">header</div>
<div id="outer-div">outer div</div>

</div>

</body>

</html>
implicit_element_creation_css
content_copyfile_download
div#header h1 {
    
    font-family:sans-serif;
    color:#66C;
    min-height:20px;
    width:100%;
    
}

div#outer-div,
div#outer-div div {
    
    border-color:solid;
    border-width:1px;
    border-style:solid;
    
    min-width:100px;
    min-height:100px;
    
    -webkit-border-radius:10px;
       -moz-border-radius:10px;
            border-radius:10px;
            
    
            
    padding:10px;
       
}
implicit_element_creation
content_copyfile_download
$('document').ready(function() {
$('#changeButton').click(function() {
//create a h1 with the class 'greeting'
//inside of the div with id 'header'
//(the message can be anything, or nothing, although thats lame)
 $("#header").html("<h1 class='greeting'>你好</h1>");
  //create a div with the text contents
 //'inner-div'
 //inside of the div with id 'outer-div'
  $("#outer-div").html("<div>inner-div</div>");
});
});