Skip to content

Instantly share code, notes, and snippets.

@garethredfern

garethredfern/prependTo.html

Created July 3, 2012 07:36
Show Gist options
  • Save garethredfern/3038286 to your computer and use it in GitHub Desktop.
Save garethredfern/3038286 to your computer and use it in GitHub Desktop.
Download ZIP
Using prependTo to remove content from the DOM.
Raw
prependTo.html
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Appending Content</title>
<style>
article {
width: 600px;
margin: auto;
}
blockquote.co {
float: right;
background: #e3e3e3;
font-size: 2em;
width: 35%;
text-align: center;
}
</style>
</head>
<body>
<article>
<h1>My Awesome Post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<span class="co">Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. <span class="co">Hello from JavaScript.</span> sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
(function() {
var co = $('article').find('span.co').each(function() {
var $this = $(this);
$('<blockquote></blockquote>', {
class: 'co',
text: $this.text()
}).prependTo( $this.closest('p') );
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment