How can I target an element, held within a template, using JavaScript?

Question

<script type="text/html" id="tmpl-wp-travel-itinerary-items">
    <div class="panel-wrap panel-wrap-itinerary">
        <label><?php esc_html_e( 'Etape', 'wp-travel' ); ?></label>
        <select id="selectjs"></select>
     </div>
</script>

getElementById() on selectjs is null; ow can I target this element, via its id, within a script tag?

@Peter I suppose it is a template which is later used by some js code. — u_mulder, Sep 18 '18 at 12:25
The js code is merely a test `document.getElementById('selectjs').innerHTML="";` And for the reason of HTML wrapped inside a — Utheron, Sep 18 '18 at 12:26
Order of calling is not clear. Maybe you call `getElementById` before required element appears in DOM. — u_mulder, Sep 18 '18 at 12:28
If this is a template you should denote the script stags as such using ` type = “text/template”`; see: https://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script — feeela, Sep 18 '18 at 12:31
In order to test the order of calling, I've put a dummy
outside the — Utheron, Sep 18 '18 at 12:33
It seems you're trying to achieve this end result: [JS Fiddle demo](https://jsfiddle.net/davidThomas/pgsufqet/), when this approach may be easier: [JS Fiddle demo](https://jsfiddle.net/davidThomas/pgsufqet/1/)? — David Thomas, Sep 18 '18 at 12:39
@RiggsFolly: apart from the poorly-phrased title, I don't believe this question is answered by your proposed duplicate. The question here seems to be: "*how can I access an element held within a template?*" and bears no relevance to the question in the title. — David Thomas, Sep 18 '18 at 12:42
Thanks for the more relevant title. @DavidThomas Thanks for the example, I'll look into it. — Utheron, Sep 18 '18 at 12:47

score 0 · Accepted Answer · answered Sep 18 '18 at 13:01

There is a way to — ultimately — retrieve the element via its id property using the <script> template approach; however it is convoluted, and requires - so far as I can tell - the creation of a temporary element to hold the template content and then querying that element:

// retrieve the innerHTML of the template, using the id of the template itself:
let templateSource = document.getElementById('tmpl-wp-travel-itinerary-items').innerHTML,

// creating an element to hold, and from which to retrieve, that content:
    template = document.createElement('div');

// assigning the content of the template as the innerHTML of the created-element:
template.innerHTML = templateSource;

// finally, retrieving the <select> element via its id, from the
// created-element and Element.querySelector():
let selectElement = template.querySelector('#selectjs');

// logging the selectElement to the console:
console.log(selectElement);

<script type="text/template" id="tmpl-wp-travel-itinerary-items">
  <div class="panel-wrap panel-wrap-itinerary">
    <label><?php esc_html_e( 'Etape', 'wp-travel' ); ?></label>
    <select id="selectjs"></select>
  </div>
</script>

JS Fiddle demo.

There is, however, a slightly easier approach, using the HTML <template> element:

// retrieving the <template> via its id:
let template = document.querySelector('#templateContent'),

  // accessing the <select> from the content property
  // of the <template>:
  select = template.content.querySelector('select');

// logging the <select> element to the console:
console.log(select);

<template id="templateContent">
  <div class="panel-wrap panel-wrap-itinerary">
    <label></label>
    <select id="selectjs"></select>
  </div>
</template>

JS Fiddle demo

References:

As I don't want to modify the existing code, I've choose to run with your first answer as it is the most relevant to my problem. The console log returned ` — Utheron, Sep 18 '18 at 13:17

How can I target an element, held within a template, using JavaScript?

1 Answers1