How to extract the required content from the current page by htmx?

Hi :)

There is no request in your second div. `hx-select` selects from the response returned from an htmx request.

See https://htmx.org/attributes/hx-select/

Yes, I know. What I want to ask is, Extracting data from the current page, cannot it be omitted?

I must add hx-get="" or hx-get="{{ path('<current>') }}"

If it cannot be omitted, then each hx-get will request the current page once, If multiple HTMX are used to dynamically load data, each HTMX will request the current page to extract data once.

To address the issues of SEO and AJAX, I have designed the following approach:

<div hx-get="" hx-select="#related-links-backup" hx-swap="outerHTML" hx-trigger="intersect once"></div>
<noscript>
	<div id="related-links-backup">
		<a href="/guide/drupal-beginner">Drupal Beginner</a>
		<a href="/guide/module-development">Module Development</a>
		<a href="/guide/htmx-in-drupal">Htmx In Drupal</a>
	</div>
</noscript>
...
more

In this way, many hx-get will be generated. Can't it directly extract data from the DOM document of the current page?
Such as: document.getElementById(id);

I can give you some direction on how htmx can be part of the edge case that you are building, but first I wonder why? If the content is on the page and you want to reveal it then that is possible with just CSS. A quick search will yield you many resources.

HTMX may save you half the work if you want to trigger some manipulation of the current page. That is you don't have to write and attach the event handler to the element. You do still have to create the javascript that does the manipulation. All the htmx attributes that you use in your example are based around the core competancy of htmx, which is bringing in and using new content from a request.

You may be looking for hx-on* but I don't think the once modifier is available there.
However if you are replacing the element making the call, once may not matter.

<div hx-on:intersect="myMoveDivFunction('#related-links-backup')"></div>

You would have to create and attach the js with the myMoveDivFunction(). The intersect event is a custom HTMX event described in the docs for hx-trigger and is stated to be inherently a one time event. I don't know if it works with hx-on*

Hello, working use hx-on:click, but use hx-on:intersect not working. Did I make a mistake?

<noscript id="related-links-backup">
	<div>
		<a href="/guide/drupal-beginner">Drupal Beginner</a>
		<a href="/guide/module-development">Module Development</a>
		<a href="/guide/htmx-in-drupal">Htmx In Drupal</a>
	</div>
</noscript>

1.<div id="related-links-target" hx-on:intersect="myMoveDivFunction('#related-links-backup')">Not Working</div>
2.<div id="related-links-target" hx-on:click="myMoveDivFunction('#related-links-backup')">Click</div>
<script>
  function myMoveDivFunction() {
    const backup = document.getElementById('related-links-backup');
    const target = document.getElementById('related-links-target');

    if (backup && target) {
      target.innerHTML = backup.innerHTML;
      backup.remove();
    }
  }
</script>

Hello, working use hx-on:click, but use hx-on:intersect not working. Did I make a mistake?

I don't think so. As I said in #4 the intersect event might only work with trigger. If you really need to manipulate the DOM on intersection rather than request the needed markup, I think you will have to build the JS yourself. The core competency of HTMX is adding interactivity between your page and the server.