TheinterestForElement property of theHTMLButtonElement interface gets or sets the target element of an interest invoker, in cases where the associated<button> element is specified as an interest invoker.

SeeCreating an interest invoker for more details.

Value

AnElement object instance, ornull if the associated<button> element does not have a target element set.

Examples

BasicinterestForElement usage

In this example, we use a<button> element'sinterestForElement property to set its target element and then retrieve the target element'stagName. ThetagName is then printed in the<button> element's text content.

HTML

We include a<button> element and a<div> element. We turn the<div> element into a popover by setting apopover attribute on it.

<button href="#">a button</button><div popover>I am a <code>&lt;div&gt;</code> element.</div>

JavaScript

We get references to the<button> and<div> elements in script, then declare an interest invoker-target relationship between the<button> and the<div> by setting the<button> element'sinterestForElement property equal to a reference to the<div>. We then set the button's text content equal to a string containing the target element'stagName, retrieved viainvoker.interestForElement.tagName.

const invoker = document.querySelector("button");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 button (for example, by hovering or focusing it) to make the<div> appear.

Specifications

Browser compatibility

See also

• Using interest invokers
• The Popover API