Zymic Webmaster Forums > Looked Around, Didnt See Anything Pertaining

Full Version: Looked Around, Didnt See Anything Pertaining

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > JavaScript

The Seventh Hokage

Jul 15 2009, 09:36 PM

Is there anyway that I can control where adding text elements to a page will show up?

i have it set so that i have buttons within a table.
Click to view attachment

when these buttons are pressed output shows on the page.

Click to view attachment

however i want to make it so that the output shows up in a particular area, specifially within another data cell of the table.

Click to view attachment

any ideas on what i should look up or study for this?

Jul 15 2009, 11:31 PM

Can you show us what you have so far?

This can be simple as id'ing an element to insert the data in (document.getElementById('foo').innerHTML = 'content'), and as complex as traversing the DOM nodes to insert it in the correct location (which really isn't all that complex).

jQuery also makes this sort of thing a doddle.

The Seventh Hokage

Jul 16 2009, 12:27 AM

sure.

here is the code to make the text appear on the page

CODE

&lt;script type="text/javascript">
function addNode(inText)
{
newGraf=document.createElement("p");
newText=document.createTextNode(inText);
newGraf.appendChild(newText);
docBody=document.getElementsByTagName("body").item(0)
docBody.appendChild(newGraf);
return false;
}
</script>

here are the buttons that , when pressed add the text into the page's body.

CODE

<button onclick="return addNode('Combo Hit')">Taijutsu Strike  </button></br>

<button onclick="return addNode('Weapon Slice')">Weapon Strike</button></br>

<button onclick="return addNode('You cant hit me')">Evasive Tactics</button></br>

<button onclick="return addNode('Hiding')">Stealth Tactics</button></br>

<button onclick="return addNode('Impervious')">Absolute Defense</button></br>

<button onclick="return addNode('Help Me!')">Squad Support</button></br>

<button onclick="return addNode('Medic!!')">Medical Support</button></br>

Jul 16 2009, 12:42 AM

Oh really simple to specify where it goes to:

This portion:

CODE

docBody=document.getElementsByTagName("body").item(0)
docBody.appendChild(newGraf);

The first line is specifying the parent node, just replace it with where you want it to go... so for example with the following HTML:

CODE

<html>
<head>
<title>Just for fun</title>
</head>

<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>

To specify the second paragraph:

CODE

myP=document.getElementsByTagName("p")[1]
myP.appendChild(newGraf);

Alternatively, you can an id attribute to the element and use:

CODE

var foo = document.getElementById('foo');
foo.appendChild(newGraf);

Hope that helps, jQuery does make this all pretty much a one line affair. Though learning the basics of DOM traversal within js is never a bad idea.

The Seventh Hokage

Jul 16 2009, 12:56 AM

thanks for the quick response. it's much appreciated. I'll study this a bit and tinker with it. i lost my main jscript book today so i was having real trouble with it.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.