Is it possible to prevent the browser from parsing certain elements?

Consider the following markup:

<div hidden id="table-template">

<table>

<tbody>

  <slot></slot>

</tbody>

</table>

</div>

<div hidden id="table-row-template">

<tr>

  <td>

    Some Content

  </td>

</tr>

</div>

I would like to use 'table-template' and 'table-row-template' as re-usable components in my script.
(clone them and append them on demand)
but as the page loads the browser parses the markup and mutates it (taking 'slot' element and insert it before the 'table' element, and stripping 'td' and 'tr' tags).

This is reasonable (not valid HTML of course), but is there any way I can prevent the browser from parsing those elements?

So far I have tried:
using hidden elements,
wrapping with 'pre'/'code' tags,
but none seem to work.

edited Jun 6 '17 at 8:02

Brian Tompsett - 汤莱恩

4,2521339103

asked Jun 6 '17 at 7:29

Yair Levy

12626

1

Take a look at HTML templates.

– PeterMader
Jun 6 '17 at 7:38

add a comment |

Consider the following markup:

<div hidden id="table-template">

<table>

<tbody>

  <slot></slot>

</tbody>

</table>

</div>

<div hidden id="table-row-template">

<tr>

  <td>

    Some Content

  </td>

</tr>

</div>

This is reasonable (not valid HTML of course), but is there any way I can prevent the browser from parsing those elements?

So far I have tried:
using hidden elements,
wrapping with 'pre'/'code' tags,
but none seem to work.

edited Jun 6 '17 at 8:02

Brian Tompsett - 汤莱恩

4,2521339103

asked Jun 6 '17 at 7:29

Yair Levy

12626

1

Take a look at HTML templates.

– PeterMader
Jun 6 '17 at 7:38

add a comment |

Consider the following markup:

<div hidden id="table-template">

<table>

<tbody>

  <slot></slot>

</tbody>

</table>

</div>

<div hidden id="table-row-template">

<tr>

  <td>

    Some Content

  </td>

</tr>

</div>

This is reasonable (not valid HTML of course), but is there any way I can prevent the browser from parsing those elements?

So far I have tried:
using hidden elements,
wrapping with 'pre'/'code' tags,
but none seem to work.

edited Jun 6 '17 at 8:02

Brian Tompsett - 汤莱恩

4,2521339103

asked Jun 6 '17 at 7:29

Yair Levy

12626

Consider the following markup:

<div hidden id="table-template">

<table>

<tbody>

  <slot></slot>

</tbody>

</table>

</div>

<div hidden id="table-row-template">

<tr>

  <td>

    Some Content

  </td>

</tr>

</div>

This is reasonable (not valid HTML of course), but is there any way I can prevent the browser from parsing those elements?

So far I have tried:
using hidden elements,
wrapping with 'pre'/'code' tags,
but none seem to work.

javascript html parsing html-table

edited Jun 6 '17 at 8:02

Brian Tompsett - 汤莱恩

4,2521339103

asked Jun 6 '17 at 7:29

Yair Levy

12626

edited Jun 6 '17 at 8:02

Brian Tompsett - 汤莱恩

4,2521339103

asked Jun 6 '17 at 7:29

Yair Levy

12626

edited Jun 6 '17 at 8:02

Brian Tompsett - 汤莱恩

4,2521339103

edited Jun 6 '17 at 8:02

Brian Tompsett - 汤莱恩

4,2521339103

edited Jun 6 '17 at 8:02

Brian Tompsett - 汤莱恩

4,2521339103

asked Jun 6 '17 at 7:29

Yair Levy

12626

asked Jun 6 '17 at 7:29

Yair Levy

12626

asked Jun 6 '17 at 7:29

Yair Levy

12626

1

Take a look at HTML templates.

– PeterMader
Jun 6 '17 at 7:38

add a comment |

1

Take a look at HTML templates.

– PeterMader
Jun 6 '17 at 7:38

Take a look at HTML templates.

– PeterMader
Jun 6 '17 at 7:38

add a comment |

3 Answers
3

active

oldest

votes

You can try using <script type="text/template"></script>

<script id="mytemplate" type="text/template">

  ...your table's html...

</script>

Then:

<script>

  alert($('#mytemplate').html());

</script>

Many libraries use this method, handlebar.js for example.

The <template> element may gain compatibility with more browser versions: http://caniuse.com/#feat=template

edited Jan 3 at 0:26

eel ghEEz

842722

answered Jun 6 '17 at 8:13

Mihaly KR

1,74121418

add a comment |

Use a fictional tag that the browser wouldn't recognise. You can still target it with Javascript and read it's text content but the browser won't parse it.

Say <template id="the-template">Foo bar</template>.

But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM.

e.g

var elToReuse = document.createElement('div').innerHTML('<h1>Lets have title here</h1>');

// Let's do some things to the elToReuse

var anotherVersion = elToReuse.querySelector('h1').innerText('My another title');



// Now it's the time to append to the DOM

document.body.appendChild(anotherVersion);

answered Jun 6 '17 at 7:46

vassiliskrikonis

45928

the 'template' tag, fixes the issue on the 'table-row-template', but the browser (chrome-58) still alters the 'table-template', (taking the 'slot' element from inside the table and append it to the template) have a look here: jsfiddle.net/gjgsyL5v/1

– Yair Levy
Jun 6 '17 at 8:24

'But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM' - I do not agree with this assumption. The process of injecting html-snippets into the DOM is much more expensive then cloning existing DOM elements.

– Yair Levy
Jun 6 '17 at 8:29

@YairLevy do you have perfomance stats on this?

– vassiliskrikonis
Jun 6 '17 at 10:47

sure... Check this one: jsperf.com/clonenode-vs-createelement-performance/32

– Yair Levy
Jun 6 '17 at 11:47

add a comment |

So I have researched a bit about my problem, and this is what i figured out -
the 'tbody' element accpets only 'tr' elements as children.
so browsers will 'fix' the markup while parsing it one way or the other.
using template tags as vassiliskrikonis suggested will not work for the 'table-template' but will fix the 'table-row-template' issue,
using script tag as @Mihaly_KR suggested will work for both, but when accessing the template you will get a plain string to work with (injecting this string into the DOM will make the browser parse it and 'fix' it once again...)

The workaround I have found is to use other tag as a placeholder for my content.
one way is using a comment e.g.
but accessing this comment element requires a use of treeWalker or nodeIterator (which are much less performant then querySelector or getElementsByTagName)
other way is using a script tag as a placeholder.
browsers will not change the markup, and it can be accessed later using querySelector or getElementsByTagName.

so my refactored code looks like this:

<template id="table-template">

<table>

<tbody>

  <script type="slot"></script>

</tbody>

</table>

</template>

<template id="table-row-template">

<tr>

  <td>

    Some Content

  </td>

</tr>

</template>

answered Jun 6 '17 at 9:38

Yair Levy

12626

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44383857%2fis-it-possible-to-prevent-the-browser-from-parsing-certain-elements%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

You can try using <script type="text/template"></script>

<script id="mytemplate" type="text/template">

  ...your table's html...

</script>

Then:

<script>

  alert($('#mytemplate').html());

</script>

Many libraries use this method, handlebar.js for example.

The <template> element may gain compatibility with more browser versions: http://caniuse.com/#feat=template

edited Jan 3 at 0:26

eel ghEEz

842722

answered Jun 6 '17 at 8:13

Mihaly KR

1,74121418

add a comment |

You can try using <script type="text/template"></script>

<script id="mytemplate" type="text/template">

  ...your table's html...

</script>

Then:

<script>

  alert($('#mytemplate').html());

</script>

Many libraries use this method, handlebar.js for example.

The <template> element may gain compatibility with more browser versions: http://caniuse.com/#feat=template

edited Jan 3 at 0:26

eel ghEEz

842722

answered Jun 6 '17 at 8:13

Mihaly KR

1,74121418

add a comment |

You can try using <script type="text/template"></script>

<script id="mytemplate" type="text/template">

  ...your table's html...

</script>

Then:

<script>

  alert($('#mytemplate').html());

</script>

Many libraries use this method, handlebar.js for example.

The <template> element may gain compatibility with more browser versions: http://caniuse.com/#feat=template

edited Jan 3 at 0:26

eel ghEEz

842722

answered Jun 6 '17 at 8:13

Mihaly KR

1,74121418

You can try using <script type="text/template"></script>

<script id="mytemplate" type="text/template">

  ...your table's html...

</script>

Then:

<script>

  alert($('#mytemplate').html());

</script>

Many libraries use this method, handlebar.js for example.

The <template> element may gain compatibility with more browser versions: http://caniuse.com/#feat=template

edited Jan 3 at 0:26

eel ghEEz

842722

answered Jun 6 '17 at 8:13

Mihaly KR

1,74121418

edited Jan 3 at 0:26

eel ghEEz

842722

edited Jan 3 at 0:26

eel ghEEz

842722

edited Jan 3 at 0:26

eel ghEEz

842722

answered Jun 6 '17 at 8:13

Mihaly KR

1,74121418

answered Jun 6 '17 at 8:13

Mihaly KR

1,74121418

answered Jun 6 '17 at 8:13

Mihaly KR

1,74121418

add a comment |

Use a fictional tag that the browser wouldn't recognise. You can still target it with Javascript and read it's text content but the browser won't parse it.

Say <template id="the-template">Foo bar</template>.

But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM.

e.g

var elToReuse = document.createElement('div').innerHTML('<h1>Lets have title here</h1>');

// Let's do some things to the elToReuse

var anotherVersion = elToReuse.querySelector('h1').innerText('My another title');



// Now it's the time to append to the DOM

document.body.appendChild(anotherVersion);

answered Jun 6 '17 at 7:46

vassiliskrikonis

45928

the 'template' tag, fixes the issue on the 'table-row-template', but the browser (chrome-58) still alters the 'table-template', (taking the 'slot' element from inside the table and append it to the template) have a look here: jsfiddle.net/gjgsyL5v/1

– Yair Levy
Jun 6 '17 at 8:24

'But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM' - I do not agree with this assumption. The process of injecting html-snippets into the DOM is much more expensive then cloning existing DOM elements.

– Yair Levy
Jun 6 '17 at 8:29

@YairLevy do you have perfomance stats on this?

– vassiliskrikonis
Jun 6 '17 at 10:47

sure... Check this one: jsperf.com/clonenode-vs-createelement-performance/32

– Yair Levy
Jun 6 '17 at 11:47

add a comment |

Use a fictional tag that the browser wouldn't recognise. You can still target it with Javascript and read it's text content but the browser won't parse it.

Say <template id="the-template">Foo bar</template>.

But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM.

e.g

var elToReuse = document.createElement('div').innerHTML('<h1>Lets have title here</h1>');

// Let's do some things to the elToReuse

var anotherVersion = elToReuse.querySelector('h1').innerText('My another title');



// Now it's the time to append to the DOM

document.body.appendChild(anotherVersion);

answered Jun 6 '17 at 7:46

vassiliskrikonis

45928

the 'template' tag, fixes the issue on the 'table-row-template', but the browser (chrome-58) still alters the 'table-template', (taking the 'slot' element from inside the table and append it to the template) have a look here: jsfiddle.net/gjgsyL5v/1

– Yair Levy
Jun 6 '17 at 8:24

'But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM' - I do not agree with this assumption. The process of injecting html-snippets into the DOM is much more expensive then cloning existing DOM elements.

– Yair Levy
Jun 6 '17 at 8:29

@YairLevy do you have perfomance stats on this?

– vassiliskrikonis
Jun 6 '17 at 10:47

sure... Check this one: jsperf.com/clonenode-vs-createelement-performance/32

– Yair Levy
Jun 6 '17 at 11:47

add a comment |

Use a fictional tag that the browser wouldn't recognise. You can still target it with Javascript and read it's text content but the browser won't parse it.

Say <template id="the-template">Foo bar</template>.

But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM.

e.g

var elToReuse = document.createElement('div').innerHTML('<h1>Lets have title here</h1>');

// Let's do some things to the elToReuse

var anotherVersion = elToReuse.querySelector('h1').innerText('My another title');



// Now it's the time to append to the DOM

document.body.appendChild(anotherVersion);

answered Jun 6 '17 at 7:46

vassiliskrikonis

45928

Use a fictional tag that the browser wouldn't recognise. You can still target it with Javascript and read it's text content but the browser won't parse it.

Say <template id="the-template">Foo bar</template>.

But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM.

e.g

var elToReuse = document.createElement('div').innerHTML('<h1>Lets have title here</h1>');

// Let's do some things to the elToReuse

var anotherVersion = elToReuse.querySelector('h1').innerText('My another title');



// Now it's the time to append to the DOM

document.body.appendChild(anotherVersion);

answered Jun 6 '17 at 7:46

vassiliskrikonis

45928

answered Jun 6 '17 at 7:46

vassiliskrikonis

45928

answered Jun 6 '17 at 7:46

vassiliskrikonis

45928

answered Jun 6 '17 at 7:46

vassiliskrikonis

45928

the 'template' tag, fixes the issue on the 'table-row-template', but the browser (chrome-58) still alters the 'table-template', (taking the 'slot' element from inside the table and append it to the template) have a look here: jsfiddle.net/gjgsyL5v/1

– Yair Levy
Jun 6 '17 at 8:24

'But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM' - I do not agree with this assumption. The process of injecting html-snippets into the DOM is much more expensive then cloning existing DOM elements.

– Yair Levy
Jun 6 '17 at 8:29

@YairLevy do you have perfomance stats on this?

– vassiliskrikonis
Jun 6 '17 at 10:47

sure... Check this one: jsperf.com/clonenode-vs-createelement-performance/32

– Yair Levy
Jun 6 '17 at 11:47

add a comment |

the 'template' tag, fixes the issue on the 'table-row-template', but the browser (chrome-58) still alters the 'table-template', (taking the 'slot' element from inside the table and append it to the template) have a look here: jsfiddle.net/gjgsyL5v/1

– Yair Levy
Jun 6 '17 at 8:24

'But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM' - I do not agree with this assumption. The process of injecting html-snippets into the DOM is much more expensive then cloning existing DOM elements.

– Yair Levy
Jun 6 '17 at 8:29

@YairLevy do you have perfomance stats on this?

– vassiliskrikonis
Jun 6 '17 at 10:47

sure... Check this one: jsperf.com/clonenode-vs-createelement-performance/32

– Yair Levy
Jun 6 '17 at 11:47

the 'template' tag, fixes the issue on the 'table-row-template', but the browser (chrome-58) still alters the 'table-template', (taking the 'slot' element from inside the table and append it to the template) have a look here: jsfiddle.net/gjgsyL5v/1

– Yair Levy
Jun 6 '17 at 8:24

'But really the best way to re-use html snippets it to create them in Javascript without polluting the DOM' - I do not agree with this assumption. The process of injecting html-snippets into the DOM is much more expensive then cloning existing DOM elements.

– Yair Levy
Jun 6 '17 at 8:29

@YairLevy do you have perfomance stats on this?

– vassiliskrikonis
Jun 6 '17 at 10:47

sure... Check this one: jsperf.com/clonenode-vs-createelement-performance/32

– Yair Levy
Jun 6 '17 at 11:47

add a comment |

so my refactored code looks like this:

<template id="table-template">

<table>

<tbody>

  <script type="slot"></script>

</tbody>

</table>

</template>

<template id="table-row-template">

<tr>

  <td>

    Some Content

  </td>

</tr>

</template>

answered Jun 6 '17 at 9:38

Yair Levy

12626

add a comment |

so my refactored code looks like this:

<template id="table-template">

<table>

<tbody>

  <script type="slot"></script>

</tbody>

</table>

</template>

<template id="table-row-template">

<tr>

  <td>

    Some Content

  </td>

</tr>

</template>

answered Jun 6 '17 at 9:38

Yair Levy

12626

add a comment |

so my refactored code looks like this:

<template id="table-template">

<table>

<tbody>

  <script type="slot"></script>

</tbody>

</table>

</template>

<template id="table-row-template">

<tr>

  <td>

    Some Content

  </td>

</tr>

</template>

answered Jun 6 '17 at 9:38

Yair Levy

12626

so my refactored code looks like this:

<template id="table-template">

<table>

<tbody>

  <script type="slot"></script>

</tbody>

</table>

</template>

<template id="table-row-template">

<tr>

  <td>

    Some Content

  </td>

</tr>

</template>

answered Jun 6 '17 at 9:38

Yair Levy

12626

answered Jun 6 '17 at 9:38

Yair Levy

12626

answered Jun 6 '17 at 9:38

Yair Levy

12626

answered Jun 6 '17 at 9:38

Yair Levy

12626

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu