how to add javascript function to html tag?

Question

Just curious, and want to know. Can I add a javascript function to certain html tag? In example, if I have div tag like this:

<div id="example">Hello!</div>

and want to add function that alert the value inside of every div like:

function divFunction(){
     alert(/*some div content*/);
}

so, it can be executed like:

<div id="example">Hello!</div>
<script>
     document.getElementById("example").divFunction();
</script>

The point of my question is to add some new attribute or function to a certain tags. Like if there is:

document.getElementById("example").innerHTML;

can it be:

document.getElementById("example").newAttribute;

What makes me curious because jQuery can done something like this:

$( "#result" ).load( "ajax/test.html" );

Answer 1

DOM elements are like javascript objects with certain properties, so you could add a new property to, in your case a new function.

Here's an example:

var element = document.querySelector('#example');

function bindToNode(node, name, fn) {
  node[name] = fn.bind(node);
}

bindToNode(element, 'logValue', function() {
  console.log(this.textContent);
});

element.logValue();

<div id="example">
  Hello!
</div>

But you shouldn't mess arround with DOM elements, a better way would be to wrap the elements like jQuery does.

Answer 2

This isn't possible because $ (jQuery) and document are defined objects that have there in built functions.

Because when you use . you call an object member.

Foo.bar() - Calling function bar() defined inside and object Foo.

So you would have to make your class/selector.

Here is a simple example:

class select {
	constructor(selector) {
  	this._element = document.getElementById(selector);
  }
  
  // Functions
  
  colorMe() {
  	this._element.style.backgroundColor = "red";
  }

  moveMe(x) {
    this._element.style.marginTop = x;
  }
}

var elem = new select("example");

elem.colorMe();
elem.moveMe("50px");

<div id="example">
  This is an example
</div>