jquery DOM Traversal

by Seetha Chitti

HTML

<div class="parent">
  <p>.parent</p>
  <div class="child">
    <p>.child</p>
  </div>
  <div class="twins">
    <p>.twins</p>
  </div>
  <div class="twins">
    <p>.twins</p>
  </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.parent {
  width: 90%;
  border: 5px solid #E18728;
  
}

.child {
  width: 90%;
  padding: 20%;
  border: 4px solid black;
  margin: .5em auto;
}

.twins {
  width: 50%;
  padding: 1em;
  border: 4px solid black;
  float: left;
}


/* styling for Pen, not related to box-sizing or layout */

body {
  font-family: sans-serif;
  font-size: 1.1em;
}

p:not(.intro) {
  text-align: center;
}

.highlight {
    background-color: yellow;
}

JavaScript

// jQuery Element Creation
// Using jQuery we can create and manipulate the DOM. Do
// the following exercises for practice.

// 1. Create a clone of the whole HTML structure. Put this
// clone into the .child element
$(".child").append($(".parent").clone());
// 2. Create a new .child element and insert it after the .twins elements
var newChild = $('<div class="child"></div>');
$(".twins:last").after(newChild);
//$(".parent").append(newChild);
// 3. Create a new paragraph element. Replace the .parent element's <p> tag with your new one.
var newPara = $('<p>New New and New </p>');
$(".parent p").replaceWith(newPara);