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> <html> <head> <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"> </script>
Now, the javascript. First, we check that the webpage has loaded:
<script>
$(document).ready(function(){
Then, we wait for someone to click on the button with the ID "show":
$("#show").click(function(){
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".
$("#results").html($("#textin").val());
});
});
</script>
</head>
<body>
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> </body> </html>
It has taken me significantly longer to write this blog post than it did to make that webpage. Hurrah for jQuery!
