HTMLAnchorElement: interestForElement property
Experimental: This is an experimental technology
Check the Browser 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.
The interestForElement property of the HTMLAnchorElement interface gets or sets the target element of an interest invoker, in cases where the associated <a> element is specified as an interest invoker.
See Creating an interest invoker for more details.
Value
An Element object instance, or null if the associated <a> element does not have a target element set.
Examples
Basic interestForElement usage
In this example, we use an <a> element's interestForElement property to set its target element and then retrieve that element's tagName. The tagName 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 a popover attribute on it.
<a href="#">a link</a>
<div id="mypopover" 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's interestForElement 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's tagName, retrieved via invoker.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.