[Help] - with innerHTML method...

[matafy]

I'm trying to create a function that would return as JavaScript's innerHTML.

PHP Code:

function html_(htmlContent){
    return this.innerHTML = htmlContent;
} 


And this is how I'm trying to call it.

PHP Code:

document.getElementById('id').html_("some html content"); 


I get this error:


Uncaught TypeError: Object #<HTMLDivElement> has no method 'html_'
(anonymous function)


I know this works...

PHP Code:

document.getElementById('id').innerHTML = "some html content"; 


But I'm trying to shorten it.

Thanks in advance,
Matafy

[Logic Ali]

function html_(  id, htmlContent )
{
  document.getElementById( id ).innerHTML = htmlContent;
}

[jmrker]

Probably easier to shorten by adding one function that can be reused many times.

function $_(IDS) { return document.getElementById(IDS); }

Then you would be able to change the innerHTML property of an element like this.

<div id="divBox1">Original content</div>
<div id="divBox2">Original display</div>

...

$_('divBox1').innerHTML = 'some html content replacing original display';
$_('divBox2').innerHTML += 'some different html content added to existing display';

[matafy]

Thanks for the response....

I made the docment.getElementByID reusable...

PHP Code:

function $_(id){
   return document.getElementById(id);
}
function html_(c){
   return this.innerHTML = c;
} 


I called it...

PHP Code:

$_('divBox1').html_("some html content"); 


Still get the error message. I'm trying to stay away from jQuery

I understand that I can use it like Logic Ali mentioned...

PHP Code:

html_($_('divBox1'), "some html content"); 


But I would like to concatenate it.

[Old Pedant]

You can *NOT* just ARBITRARILY apply a method to a DOM object. Or to any object, for that matter.

*IF* the object in question was a true JavaScript object, you could alter its prototype to add the method. But because it is a DOM object, and because the DOM is *ACTUALLY* implemented in native code under the covers, not at all in JavaScript, there is no way to directly add methods to DOM objects.

You *could* create a JavaScript "wrapper" object for your DOM objects. You might, for example, create one wrapper for all the DOM objects that indeed have an innerHTML property (you'd surely want a different wrapper for fields that instead have a value property, for example).

Maybe something like this:

// constructor for a wrapper for an object with innerHTML property:
function htmlObj( objOrId )
{
    // if a string is passed as the argument, assume it is an ID
    if ( typeof(objOrId) == "string" ) {
        this.domObj = document.getElementById(objOrId);
    } else {
        // otherwise assume it's a DOM object
        // (not the best assumption to make, but this is a silly demo)
        this.domObj = objOrId;
    }
    this.html = function( html ) 
    { 
        // if the argument is non-null, change the DOM object's innerHTML
        if ( html != null ) { this.domObj.innerHTML = html; }
        // and not matter what, always return its innerHTML
        return this.domObj.innerHTML;
    }
}

var box1 = new htmlObj( "divBox1" );
box1.html( "some html content" ); // pass non-null to set the innerHTML
// or 
alert( box1.html() ); // pass null or no arg to GET the innerHTML

Truthfully, I think that's more trouble than it is worth, but up to you.

[Dormilich]

an option to call the html_() function were:

PHP Code:

html_.call($_('divBox1'), "some html content"); 


though whether that is sensible is another question.

[matafy]

Originally Posted by Old Pedant

// constructor for a wrapper for an object with innerHTML property:
function htmlObj( objOrId )
{
    // if a string is passed as the argument, assume it is an ID
    if ( typeof(objOrId) == "string" ) {
        this.domObj = document.getElementById(objOrId);
    } else {
        // otherwise assume it's a DOM object
        // (not the best assumption to make, but this is a silly demo)
        this.domObj = objOrId;
    }
    this.html = function( html ) 
    { 
        // if the argument is non-null, change the DOM object's innerHTML
        if ( html != null ) { this.domObj.innerHTML = html; }
        // and not matter what, always return its innerHTML
        return this.domObj.innerHTML;
    }
}

var box1 = new htmlObj( "divBox1" );
box1.html( "some html content" ); // pass non-null to set the innerHTML
// or 
alert( box1.html() ); // pass null or no arg to GET the innerHTML

This looks like more than headache for me. I appreciate the help Old Pedant.

This is what I ended up doing for now or at least for when I get more coding experience...

PHP Code:

function $_(e){

    var hash = e.match("#");
    var dot = e.match(".");
    var _id = e.replace(/#/g, "");
    var _class = e.replace(/./g, "");

    if(hash == "#"){
        return document.getElementById(_id);
    } else if(dot == "."){
        if(document.getElementsByClassName(_class) == _class){
            return document.getElementsByClassName(_class);
        } else {
            document.getElementsByClass = function(_class){
                var cName = [];
                var tagName = document.getElementsByTagName('*');
                for(var i=0; i<tagName.length; i++){
                    if(tagName[i].className == _class){
                        cName.push(tagName[i]);
                    }
                }
                return cName;
            }
            return document.getElementsByClass(_class)[0];
        }
    }
}
function html_(element, htmlContent){
    element.innerHTML = htmlContent;
}

html_($_('.class'), "Some Content"); 


Thanks everyone!

[jmrker]

You did not follow my directions in post #3 with this modification you made in post #4 ...

function $_(id){
   return document.getElementById(id);
}
function html_(c){
   return this.innerHTML = c;
}

The 'this' in your return is not the element you are trying to modify.