How to use _create_prototype_node for change the A-Tag to a Span/Div-Tag

[gkieninger]

Hi!
I would like to change the A-Tag to a Span or Div-Tag because it doesn't make very much sense with a right click to see a 'Open Link in new Tab' and I would like to have a A-Tag on my own in the text.

Can somebody help me to change the A-Tag to Span or Div? Just a small example would help me.
Thank you.

[alex223125]

Same here, I have a lot of divs which I put inside li element, and for me it's best if it's not a tag but div. If it possible to customize generated template in some easy way? For example in tagify you can define template key and put html with params which will be generated

Many thanks!

@vakata Thanks for cool library!

[alex223125]

@gkieninger Found solution

We have object here:
appname/node_modules/jstree/src/jstree.js

Starts with this:

$.jstree.core.prototype = {

One of the property looks like this:

		/**
		 * Create a prototype node
		 * @name _create_prototype_node()
		 * @return {DOMElement}
		 */
		_create_prototype_node : function () {
			var _node = document.createElement('LI'), _temp1, _temp2;
			_node.setAttribute('role', 'none');
			_temp1 = document.createElement('I');
			_temp1.className = 'jstree-icon jstree-ocl';
			_temp1.setAttribute('role', 'presentation');
			_node.appendChild(_temp1);
			_temp1 = document.createElement('A');
			_temp1.className = 'jstree-anchor';
			_temp1.setAttribute('href','#');
			_temp1.setAttribute('tabindex','-1');
			_temp1.setAttribute('role', 'treeitem');
			_temp2 = document.createElement('I');
			_temp2.className = 'jstree-icon jstree-themeicon';
			_temp2.setAttribute('role', 'presentation');
			_temp1.appendChild(_temp2);
			_node.appendChild(_temp1);
			_temp1 = _temp2 = null;

			return _node;
		},

So we should redefine this function to get changed element (I found this function by looking where jstree-anchor is used).

Step 1.
Copy this function

Step 2.
Change this line

_temp1 = document.createElement('A');

To this line:

_temp1 = document.createElement('div');

Step 3.
Override existing function by redefining it.
In my case I use stimulus js and before controller code in global scope I put this:

jquery.jstree.core.prototype._create_prototype_node = function () {
    var _node = document.createElement('LI'), _temp1, _temp2;
    _node.setAttribute('role', 'none');
    _temp1 = document.createElement('I');
    _temp1.className = 'jstree-icon jstree-ocl';
    _temp1.setAttribute('role', 'presentation');
    _node.appendChild(_temp1);
    _temp1 = document.createElement('div');
    _temp1.className = 'jstree-anchor';
    // _temp1.setAttribute('href','#');
    _temp1.setAttribute('tabindex','-1');
    _temp1.setAttribute('role', 'treeitem');
    _temp2 = document.createElement('I');
    _temp2.className = 'jstree-icon jstree-themeicon';
    _temp2.setAttribute('role', 'presentation');
    _temp1.appendChild(_temp2);
    _node.appendChild(_temp1);
    _temp1 = _temp2 = null;

    return _node;
}

Instead of jquery in could be just $, on in another way, depends how jquery is imported in your application.

As you can see I changed one line to

_temp1 = document.createElement('div');

So now I have <div> instead of <a>.

I also commented this line:
_temp1.setAttribute('href','#');
Because I don't need href for div, because it's not a link

That's all

@vakata Maybe it's a good idea to add example like this to docs. I think it will be very useful for someone how's doing a lot of customization.