jQuery is actually fairly amazing

HTML display prototyper
After a very brief time reading the excellent jQuery tutorial on w3schools this afternoon. I've made a useful little prototyping page, which allows you to enter HTML in the text box and see it displayed below. It takes a staggeringly few lines of code.

First, the usual top-of-file business:

<!DOCTYPE html>
<meta charset="UTF-8">

<title>Try HTML</title>

Then, we load in jQuery from Google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

Now, the javascript. First, we check that the webpage has loaded:

Then, we wait for someone to click on the button with the ID "show":

Now we take the value from the textarea with the ID "textin" and use it to set the HTML inside the element with the ID "results".


Then, in the HTML, we have the area for the user to enter text:
<p><textarea id="textin" rows="4" cols="50"></textarea>

The button to press:
</p><button id="show">Show Results</button>

And the area to show the results:
<p id="results"> </p>

It has taken me significantly longer to write this blog post than it did to make that webpage. Hurrah for jQuery!


Leave a Reply

Your email address will not be published. Required fields are marked *



This site uses Akismet to reduce spam. Learn how your comment data is processed.