What's the fastest and/or cleanest way to store text content in javascript/DOM?

Question

I typically see version 1 but some open source projects I work on use version 2 and I've used version 3 in the past. Does anyone have a more elegant solution, maybe one that's more scalable?

Version 1:

var text1 = 'this is my script\'s content';

Version 2:

<script type="text/plain" id="text1">This is my content</script>
<script> var text1 = $('#text1').html(); </script>

Version 3:

<input type="hidden" id="text1" value="this is my content">
<script> var text1 = $('#text1').val(); </script>

Version 4:

<span class="hidden" id="text1">this is my content</span>

I guess it depends on the size of the text. Long text with line breaks are a bit tedious in JavaScript (because you cannot have multi-line strings). The third way seems to abuse form elements as data containers. Obviously assigning text directly to a variable is "faster" than reading it from the DOM. — Felix Kling, Dec 27 '12 at 13:06

score 7 · Answer 1 · answered Dec 27 '12 at 13:09

7

v1, because it is the ONLY way to store text in JavaScript. Everything else you've listed is storing text in DOM.

DOM is "presentation" and it is generally bad idea to mix "data" and "presentation". For example when you implement collision in 3D FPS, you will never scan models from screen (presentation), you'll compare their coordinates in their data instead.

answered Dec 27 '12 at 13:09

Oleg V. Volkov

21,719
4
44
68

Maybe I worded the question incorrectly. – Ryan Detzel Dec 27 '12 at 13:10
@RyanDetzel, not only that. There's quite an ideological difference: DOM is "presentation" and you really shouldn't mix "data" with "presentation". – Oleg V. Volkov Dec 27 '12 at 13:11
Is v2 presentation though? – Ryan Detzel Dec 27 '12 at 13:14
4

@Oleg: To be fair, HTML is content and structure, and CSS is presentation. DOM is just a way to represent hierarchal structures. Take the `script` for example, it's certainly not presentation. – Felix Kling Dec 27 '12 at 13:14
1

@FelixKling, to be really fair, it is convoluted and initially unplanned mix of both. In my opinion it makes it even less suitable to store raw data. – Oleg V. Volkov Dec 27 '12 at 13:33

score 4 · Answer 2 · answered Dec 27 '12 at 13:08

I've never used v2. I only use v3 & v4 when communicating with backend, in case they need to send me a variable to be used in my JS. But for anything I work on, I use v1 - there's no need to pollute your html. Separation of interaction and content. Also, I switch between double and single quotes depending on my content. No need for all the escape slashes.

iJade · Answer 3 · 2012-12-27T13:17:00.673

0

storing text as in version 1 is good as rest store data in DOM

edited Dec 27 '12 at 13:17

answered Dec 27 '12 at 13:11

iJade

23,144
56
154
243

Any reference to this? Why not in the DOm, memory? – Ryan Detzel Dec 27 '12 at 13:12
though its not clear but still its worth a read......http://stackoverflow.com/questions/5905994/i-know-its-bad-to-store-data-in-the-dom-but-why – iJade Dec 27 '12 at 13:16

What's the fastest and/or cleanest way to store text content in javascript/DOM?

3 Answers3