How would I go about make function for object JavaScript?

Question

How would I making my own function like .innerHTML for document.getElementById("idName");? For example it would look something like document.getElementById("idName").myFunction;.

Answer 1

You would need to modify the HTMLElement prototype.

document.getElementById will return a HTMLElement object, however it is generally thought of as bad practice modifying any native object as they are subject to change and you might have issue in different browsers. And you might need different handling for different elements.

(function(proto) {
  // HTMLelement prototype is passed into the closure
  // set your method if it's not set on the prototype
  proto.myFunction = proto.myFunction || function() {
    // this === element that method was run on
    console.log('myFunction', this.textContent)
  }
})(HTMLElement.prototype)

var element = document.getElementById('element')
element.myFunction()

<div id="element">this is my element</div>

If you ever want to have a method. I would suggest using jQuery and creating a simple plugin to attach new behaviour, You will also get the benefit of being able to work with collections of elements, and have the jQuery api as helper functions.

!(function($){
  // jQuery is passed into the closure
  // $.fn === $.prototype === jQuery.prototype
  $.fn.myFunction = function(){
    // this === the element that the method was run on
    console.log($(this).text())
  }
})(jQuery)

var $element = $('#element')
$element.myFunction()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element">this is my $element</div>

Answer 2

Here is how you would go about this:

To create a new method for a object such as a string, you can just do String.prototype.MethodName = function(args) { code }.

Here is an example:

String.prototype.replaceAll = function(a, b) {
  var regExp
  regExp = new RegExp(a, "ig")
  return this.replace(regExp, b)
}

g = "Hello null"
console.log(g)
g = g.replaceAll("null", "World!")
console.log(g)

In this example, we created the replaceAll function. It is used to replace a certain keyword with a certain word or phrase. Once we do that, we can call the replaceAll function on a String.

Hope this helps!