Writting to the DOM Frustrations

[Siberian]

I know jQuery is recommended to write to the DOM, I want to understand how to write to the DOM in Javascript, considering how many programs use Javascript as there language, never know what I want to or need to develope for (maybe a smart phone app in the future) :)

var a = document.getElementById('boxa');
var outputResults = a.getElementById('goat');
outputResults.innerHTML = write("what");


<div id="boxa">
<h1 id = "header">This is an emergency</h1>
<p>what is going on<span id="goat"></span>
</div>
</div>

How come I'm not writting the word "what" within the span ID=goat ?

[rtrethewey]

The 'innerHTML' property requires a string, not a function like 'write()'. Try:

outputResults.innerHTML = "what";

[JorgeM]

What you can do to help you through these types of issues is to hit F12 on your browser and take a look at the console tab. You'll see errors reported there and those errors serve as great clues at to what the problem is related to.

[Siberian]

Rtrenth - Not working, I put the code online [Link]
JorgeM - I do most of my JS coding offline !

[JorgeM]

What do mean offline? Like paper and pencil offline?

Or do you mean no web server? The great thing about HTML and Javascript is that you don't need a webserver. Your browser can open the HTML file on your local computer. Your browser will run your javascript code. You can use your browser's tools/console to test javascript directly.

[Siberian]

Arghh, Jorge, that is what I've been doing. I just want help with getting this to write on the DOM.

[Alberto Bucur]

Hi,
It's simple, but write("what") must be a function which return somthing; like this.

function My_write(mystring)
{
 return mystring;
}

......
outputResults.innerHTML = My_write("what");

[rtrethewey]

Move the JavaScript code to come after your HTML and include the change I suggested. As you show the code now, the <span id="goat"> does not exist yet when the JavaScript is executed, so the code fails with an error when it tries to use document.getElementById().

[Siberian]

rtreth - I placed the code just before the closing body tag, as well as just before the closing html tag, whichever one would hopefully work. Unfortunately, nothing worked :(

[GliderPilot]

you cannot do a getElementByID on an element, that function is not available. ID's are suppose to be unique in a document so you should just be doing a getElementID on the document to get your element:

var outputResults = document.getElementById('goat');
outputResults.innerHTML = "what";


<div id="boxa">
<h1 id = "header">This is an emergency</h1>
<p>what is going on<span id="goat"></span>
</div>
</div>

[Alberto Bucur]

Hi,
I explained to you how to use innerHTML here: http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/476029/writting-to-the-dom

Now you want to change the content of a <span> tag.
I give you this example:

function My_write(mystring)
{
return mystring;
}
......
outputResults.innerHTML = My_write("what");

But, you must have an event to trigger whole process.
Just give us all your code, most certainly you have errors in your programm.

[Siberian]

GliderPost = You mean add to the variable. Also put the span ID in a variable, not the parent of the DIV, your method worked.

Albuc - Writting an entire function seems a bit sloppy to me !

[GliderPilot]

Yes you can't take the parent DIV and do a getElementByID on it to get a child. If you give your span a unique ID than you don't have to worry about which DIV it is in to access it. The other option you could use would be to getElementsByTagName which is available when referencing a parent element:

var a = document.getElementById('boxa');
var outputResults = a.getElementsByTagName("span")[0];
outputResults.innerHTML = "what";

[Siberian]

Glider - Adding that you want the first item in the list [0], that is helpful, thanks :)

[Siberian]

The following code, select the ID, then select the first span tag in this case, as in the previous cases there is only one. Then write "whatever". The string "whatever" is not being written ?

var acorn = document.getElementById("boxa");
var outputResults = acorn.getElementByTagName("span")[0];
outputResults.innerHTML = "whatever";

[GliderPilot]

Missed the s in elements it plural. getElementsByTagName()

[Siberian]

var acorn = document.getElementsById("boxa");
var outputResults = acorn.getElementByTagName("span")[0];
var total = outputResults.getElementsById("goat");
total.innerHTML = "whatever";

Continues not to write ?

[GliderPilot]

Added the s to the Wrong function. getElementByID is singular, no s, getElementsByTagName is plural

[Siberian]

My fault, but it still isn't working !

var acorn = document.getElementById("boxa");
var outputResults = acorn.getElementsByTagName("span")[0];
var total = outputResults.getElementById("goat");
total.innerHTML = "whatever";

[GliderPilot]

You're trying to combine both of the solutions I gave you, but it's one or the other. This will throw a JS error as it's not a permitted function: var total = outputResults.getElementById("goat");

go with either:

var acorn = document.getElementById("boxa");
var outputResults = acorn.getElementsByTagName("span")[0];
outputResults.innerHTML = "whatever";

Or:

document.getElementById("goat").innerHTML = "whatever";

[Siberian]

Thanks, I was adding the extra line which wasn't needed.

[Siberian]

I think I got this code not how I want to describe it, but I'll go ahead with what I want to do, and if anyone wants to fill in what I can add with the .nodeValue, go ahead.

I want to write to the span the literal tags of all the child nodes to the span tag, whether there are h1, divs, p tags etc.

var acorn = document.getElementById("boxa");
var outputResults = acorn.childNodes;
var b3 = outputResults[0].nodeValue;
var b2 = outputResults.getElementsByTagName("span")[0];