Login

butterfλi · (This post was last modified: 2009-06-21, 09:28 PM by butterfλi.)

Say I have this code
[html]<div id='test'>sample</div> [/html]

to call upon that code I would normally use

Code:
getElementById('test').innerHTML = 'sample';

//lets ignore doing it this way for the moment "getElementById('test')"

But is there any way I can use the following code?

Code:
getElementById('test').innerHTML('sample');

(if my vocab is right), in the code, innerHTML is an object. In order for the second code to work, innerHTML would need to be a method. Basically in the end what I'm looking to do is:

Code:
getElementById('test').innerHTML('sample').doFunctionHere();

Russt · (This post was last modified: 2009-06-21, 10:11 PM by Russt.)

Err, innerHTML is a property of the HTMLElement object or something like that. What you want is a method that sets the innerHTML and returns the object?

I'm pretty sure you can extend the HTMLElement (or whatever it is) class and define your own method to do just that, but I don't know/recall how.

Edit: Quick Google search tells me you want something like

Code:
HTMLElement.prototype.setInnerHTML = function(stuff) {

var element = this;

element.innerHTML = stuff;

return element;

}

Then you'd just go

Code:
getElementById('test').setInnerHTML('sample').doFunctionHere();

Edit:

Yah, it works.

Edit again:
But apparently this doesn't work in IE, and you have to do this?

butterfλi · 2009-06-21, 10:25 PM

setInnerHTML and Firefox aren't buttbuddies :<

Also, I'm wondering if converting an object(innerHTML) to a string using toString() would work...

edit: ah, you ninja editted. brb checking your edit method

Russt · 2009-06-21, 10:42 PM

Isn't the value of innerHTML already a string?

butterfλi · 2009-06-21, 10:49 PM

Yeah, you're right. It is. But I'm still not quite where I wanna be.

Also, I tried your way in Firefox 3.0.11

[Image: onload.png]

Russt · 2009-06-21, 11:00 PM

Hm.
Doing it with onClick works. onLoad doesn't.

Ah, I know what's up. Can't put an onLoad on a div. Add it to the body element instead, it should work.

butterfλi · 2009-06-22, 02:02 AM

Oh thanks; I was used to seeing onClick in things like buttons and links, I didn't know it worked with divs too xd

So the function you found was able to allow the function test() to call upon the innerHTML of the div... but I think I'm doing something wrong since I still can't modify the innerHTML

for instance:

Quote:<html>
<head>
<script type="text/javascript">
HTMLElement.prototype.setInnerHTML = function(stuff) { //perhaps should be prototype.innerHTML?
var element = this;
element.innerHTML = stuff;
return element;
}

function test() {
document.getElementById('test').innerHTML('stuff').style.textTransform = "uppercase";
}

</script>

</head><body>
<div id='test' onClick='test()'>stuff</div>
</body>
</html>

Russt · 2009-06-22, 02:17 AM

err. The name of the function is setInnerHTML, so you have to call it that way. document.getElementById('test').setInnerHTML('stuff').style.textTransform;.

The method's name can't be innerHTML because that's already the name of the property. If innerHTML was defined as a function to set the value of innerHTML (i.e. itself), that would cause problems.

butterfλi · 2009-06-22, 11:30 AM

oh, right. I thought setInnerHTML was a built-in function. Thanks Russt you've been a great help.

Login
Username:
Password:	Lost Password?
	Remember me