How to get element from template by javascript?

Question

I dont know good method how to get DOM element from template by javascript.

Example template:

<script id = "template" type="text/template">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
</script>

For example i want get div with "text2"

There is ways which i know, all of them are bad:

1. Add "class" to all elements - it breaks semantics (class created for CSS). In big projects you must use very long names for classes, its very inconvenient.

2. Get element by his number (index) - when adding a new element, you must rewrite old numbers in your code.

Answer 1

I see a couple of options:

1. If you don't want to use class , you can use a data-* attribute.

2. Assuming you load the template once and then duplicate its contents as desired, you could put id values on the elements in the template, which you then remove when cloning them and adding them to the document (so you don't end up with the same id on more than one copy of the element, which would be invalid and probably counterproductive).