CODEWITHSUNDEEP
javascripthtmlhtml5-template
jhodgson4
jhodgson4

Reputation: 1656

Getting html from template tag

Im trying to get the html of the below to add to a widget. The widget is not working and when I output the variable below. The html is not exactly the same. You can see the HIT tags have been moved to the top?

<template id="hit-template">

            <table class="table">
                <thead>
                    <tr>
                        <th>
                            name
                        </th>
                        <th>
                            brand
                        </th>
                        <th>
                            price
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @{{#hits}}
                    <tr>
                        <td>
                          @{{fname}}
                        </td>
                        <td>
                            @{{email}}
                        </td>
                        <td>
                            @{{age}}
                        </td>
                    </tr>
                    @{{/hits}}
                </tbody>
            </table>
        </template>

<script>
 var hitTemplate = document.querySelector('#hit-template').innerHTML;
</script>

OUTPUT of hitTemplate:

 {{#hits}}

                    {{/hits}}
                <table class="table">
                <thead>
                    <tr>
                        <th>
                            name
                        </th>
                        <th>
                            brand
                        </th>
                        <th>
                            price
                        </th>
                    </tr>
                </thead>
                <tbody><tr>
                        <td>
                          {{fname}}
                        </td>
                        <td>
                            {{email}}
                        </td>
                        <td>
                            {{age}}
                        </td>
                    </tr></tbody>
            </table>

Any advice would be greatly appreciated.

Thanks

Joe

Upvotes: 0

Views: 49

Answers (2)

xxxmatko
xxxmatko

Reputation: 4142

Be aware of that "..while the parser does process the contents of the element while loading the page, it does so only to ensure that those contents are valid ...", so the problem is the the content is processed and is not valid.

Try to use script element with type set to text/template like this:

<script>
function showTemplate() {
  alert(document.querySelector('#hit-template').innerHTML);
}
</script>
<script id="hit-template" type="text/template">
	<table class="table">
		<thead>
			<tr>
				<th>
				name
				</th>
				<th>
				brand
				</th>
				<th>
				price
				</th>
			</tr>
		</thead>
		<tbody>
			@{{#hits}}
				<tr>
					<td>
					@{{fname}}
					</td>
					<td>
					@{{email}}
					</td>
					<td>
					@{{age}}
					</td>
				</tr>
			@{{/hits}}
		</tbody>
	</table>
</script>
<button onclick="showTemplate()">show template</button>

Upvotes: 0

Supersharp
Supersharp

Reputation: 31199

You should do this instead:

<script>
 var hitTemplate = document.querySelector('#hit-template').content.innerHTML;
</script>

The code is in the content property.

Upvotes: 0

Related Questions