HTMLAnchorElement: interestForElement property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
TheinterestForElement property of theHTMLAnchorElement interface gets or sets the target element of an interest invoker, in cases where the associated<a> element is specified as an interest invoker.
SeeCreating an interest invoker for more details.
Value
AnElement object instance, ornull if the associated<a> element does not have a target element set.
Examples
BasicinterestForElement usage
In this example, we use an<a> element'sinterestForElement property to set its target element and then retrieve that element'stagName. ThetagName is then printed in the<a> element's text content.
HTML
The markup includes an<a> element and a<div> element. We turn the<div> element into a popover by setting apopover attribute on it.
<a href="#">a link</a><div popover>I am a <code><div></code> element.</div>JavaScript
We get references to the<a> and<div> elements in script. We then create the interest invoker-target relationship between the<a> and the<div> by setting the<a> element'sinterestForElement property equal to a reference to the<div>. We then update the<a> element's text content to include a string containing the target element'stagName, retrieved viainvoker.interestForElement.tagName.
const invoker = document.querySelector("a");const popover = document.querySelector("div");invoker.interestForElement = popover;invoker.textContent = `My target is a ${invoker.interestForElement.tagName} element`;Result
The example renders like this:
Try showing interest in the link (for example, by hovering or focusing it) to make the<div> appear.