Bambang pramusintha

How to Creating New HTML Elements

In HTML Element, JQuery, Srcipt PHP, Tutorial, Website Tutorial, Wordpress Tutorial on July 27, 2012 at 9:13 am

jQuery help us to create an HTML elements and insert them into a page.

If we pass a text string that spells out a new HTML element to the jquery ( ) or $( ) function (which are the same thing), jQuery will create that new element:

$(“<p>I’m a new &lt;p&gt;element!</p>”)

The upper code will display ”  I’m a new <p> element ! “

To actually get the new element into a page, we have to use a function like insert After () , passing a selector indicating the element that you want to insert the new element after.

This tutorial creates new <p> elements and inserts them into a page following a <p> element with the ID “first”, like this:

$(“

I’m a new <p>element!

”).insertAfter(“#first”);

To create new elements:

1. We are going to use text editor (such as notepad or Wordpad) to create our HTML page and give the file name as “create.html”.

2. Enter the code to add the jQuery libraryand add a element with the ID “first”.

<html>
<head>

<title>Creating new elements</title>

<script type=”text/javascript”src=”jquery-1.5.1.js”>
</script>

</head>
<body>

<h1>Creating new elements</h1>

<div>
<p id=”first”>A new element is coming up…</p>

</div>

</body>

</html>

3. Add the code to create four new <p>elements and insert them into the page.

<html>

<head>

<title>Creating new elements</title>

<script type=”text/javascript”src=”jquery-1.5.1.js”>
</script>

<script type=”text/javascript”>

$(function( )
{
$(“

And here’s another one!

”).insertAfter(“#first”);

$(“

And me too!

”).insertAfter(“#first”);

$(“

Me too!

”).insertAfter(“#first”);

$(“

I’m a new <p> element!

”).insertAfter(“#first”);

}
);

</script>

</head>

<body>

<h1>Creating new elements</h1>

<p id=”first”>A new element is coming up…</p>

</body>
</html>

4. Save the file.

5. Navigate to the file in a web-browser.

Besides the insert After ( ) function, there’s also an insert Before ( ) function to insert HTML before another page element.

6. The output is as follow :

Creating New HTML Elements

Advertisements
  1. […] How to Creating New HTML Elements […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: