ansaurus

Question

Answer 1

+4 A:

Put the above in a <script type="text/javascript"> at the bottom of your page and make sure there's an <div id="someElementId"> in your document.

What it's doing is creating a new <p>, <b> and <br> tag. It then sets the title on the paragraph, adds some text to all tags and finally adds the whole mess to an element with id #someElementId.

You can see it in action here.

Pat 2010-08-18 11:46:52

Answer 2

+2 A:

Here is a suitable test harness. Paste the following into a new .html file:

<html><head><script language="javascript"><!--// your javascript here:
function _onload()
{
    var theNewParagraph = document.createElement('p');
    var theBoldBit = document.createElement('b');
    var theBR = document.createElement('br');

    theNewParagraph.setAttribute('title','The test paragraph');

    var theText1 = document.createTextNode('This is a sample of some ');
    var theText2 = document.createTextNode('HTML you might');
    var theText3 = document.createTextNode('have');
    var theText4 = document.createTextNode(' in your document');

    theBoldBit.appendChild(theText2);
    theBoldBit.appendChild(theBR);
    theBoldBit.appendChild(theText3);

    theNewParagraph.appendChild(theText1);
    theNewParagraph.appendChild(theBoldBit);
    theNewParagraph.appendChild(theText4);

    document.getElementById('someElementId').appendChild(theNewParagraph);
}
//--></script></head><body onload='_onload()' id='someElementId'></body></html>

moonshadow 2010-08-18 11:50:02

<body onload='_onload()' id='someElementId'></body> // For wat this is used?If i want to display the table named "Employee" from my DB in mysql. Wat should i do? How to use dom? Please explain..

Gladiator 2010-08-18 12:21:39

@gladiator: *onload*, when used in the body element, executes content of the attribute as a javascript expression when the document has been fully loaded by the browser. As for your second question, that's probably best for a different thread entirely. Also, you're much better off starting with some javascript tutorials rather than jumping in at the deep end. http://google.com/search?q=javascript+tutorial

Andy E 2010-08-18 12:36:36

Answer 3

+5 A:

What you have is a snippet of JavaScript code. I've added comments to the code to explain each section:

// Create 3 elements, a <p>, a <b> and a <br>
var theNewParagraph = document.createElement('p');
var theBoldBit = document.createElement('b');
var theBR = document.createElement('br');

// Set the title attribute of the <p> element we created
theNewParagraph.setAttribute('title','The test paragraph');

// Create 4 "text nodes", these appear as text when added to elements
var theText1 = document.createTextNode('This is a sample of some ');
var theText2 = document.createTextNode('HTML you might');
var theText3 = document.createTextNode('have');
var theText4 = document.createTextNode(' in your document');

/* Add the second text node, the <br> element and the 3rd text node to the
   <b> element we created */
theBoldBit.appendChild(theText2);
theBoldBit.appendChild(theBR);
theBoldBit.appendChild(theText3);

/* Add the first text node, the <b> element and the 4th text node to the
   <p> element we created.  All nodes are now descendants of the <p> */
theNewParagraph.appendChild(theText1);
theNewParagraph.appendChild(theBoldBit);
theNewParagraph.appendChild(theText4);

/* Finally, add the <p> element to an element with an id attribute of 
   someElementId, so we can see all the content on our page */
document.getElementById('someElementId').appendChild(theNewParagraph);

The result is the following HTML as the content of someElementId:

<p title="The test paragraph">This is a sample of some <b>HTML you might<br>
  have</b> in your document</p>

Others have explained how to add this script to your document using the <script> element.

Andy E 2010-08-18 11:55:57

Answer 4

+1 A:

How to run:

<head>
    <script type="text/javascript">
        function CreateTestParagraph () {
            var theNewParagraph = document.createElement('p'); 
            var theBoldBit = document.createElement('b'); 
            var theBR = document.createElement('br'); 

            theNewParagraph.setAttribute('title','The test paragraph'); 
            var theText1 = document.createTextNode('This is a sample of some '); 
            var theText2 = document.createTextNode('HTML you might'); 
            var theText3 = document.createTextNode('have'); 
            var theText4 = document.createTextNode(' in your document'); 

            theBoldBit.appendChild(theText2); 
            theBoldBit.appendChild(theBR); 
            theBoldBit.appendChild(theText3); 

            theNewParagraph.appendChild(theText1); 
            theNewParagraph.appendChild(theBoldBit); 
            theNewParagraph.appendChild(theText4); 

            document.getElementById('someElementId').appendChild(theNewParagraph); 
        }
    </script>
</head>
<body onload="CreateTestParagraph ()">
    <div id="someElementId"></div>
</body>

Your CreateTestParagraph method creates the following HTML content dynamically:

<p title="The test paragraph">This is a sample of some <b>HTML you might<br>have</b> in your document</p>

and put that contents into the someElementId element.

Related links:
createElement method,
createTextNode method,
appendChild method,
getElementById method,
onload event

gumape 2010-08-18 12:04:38

ansaurus

tags:

views:

answers:

How can I run this in HTML?

related questions