a more graceful multi-line javascript string method

Question

The only way I know how to print a huge string without using += is to use \ backslashes. ugly!

<div id="foo"></div>
<script type="text/javascript">
var longString = '<div id="lol">\
        <div id="otherstuff">\
            test content. maybe some code\
        </div>\
    </div>';

document.getElementById('foo').innerHTML = longString;
</script>

is there any way to do this where the longString is untainted? php has $foo = ''' long multiline string '''; I want this in javascript!

Anyone know of a better method for printing long, multi-line strings in javascript?

Answer 1

In general, the answer is: not in the language syntax. Though as Ken pointed out in his answer there are many work-arounds (my personal method is to load a file via AJAX). In your specific case though, I'd prefer creating a HTML constructor function so you can then define the HTML structure using javascript object literals. Something like:

var longString = makeHTML([{
  div : {
    id : "lol",
    children : [{
      div : {
        id : "otherstuff",
        children : [{
            text : "test content. maybe some code"
        }]
    }]
 }]

which I find to be much easier to handle. Plus, you this would allow you to use real function literals when you need it to avoid string quoting hell:

makeHTML([{
  span : {
    onclick : function (event) {/* do something */}
  }
}]);

note: the implementation of makeHTML is left as exercise for the reader

---

Additional answer:

Found some old code after a quick scan through my hard disk. It's a bit different from what I suggested above so I thought I'd share it to illustrate one of the many ways you can write functions like this. Javascript is a very flexible language and there is not much that forces you to write code one way or another. Choose the API you feel most natural and comfortable and write code to implement it.

Here's the code:

function makeElement (tag, spec, children) {
    var el = document.createElement(tag);
    for (var n in spec) {
        if (n == 'style') {
            setStyle(el,spec[n]);
        }
        else {
            el[n] = spec[n];
        }
    }
    if (children && children.length) {
        for (var i=0; i<children.length; i++) {
            el.appendChild(children[i]);
        }
    }
    return el;
}

/* implementation of setStyle is
 * left as exercise for the reader
 */

Using it would be something like:

document.getElementById('foo').appendChild(
  makeElement(div,{id:"lol"},[
    makeElement(div,{id:"otherstuff"},[
      makeText("test content. maybe some code")
    ])
  ])
);

/* implementation of makeText is
 * left as exercise for the reader
 */

Answer 2

One technique if you have a big block is a <script> tag with an invalid type. It will be ignored by browsers.

<script type="text/x-my-stuff" id="longString">
    <div id="lol">
        <div id="otherstuff">
            test content. maybe some code
        </div>
    </div>
</script>
<script type="text/javascript">
    var longString = document.getElementById("longString").text;
    document.getElementById('foo').innerHTML = longString;
</script>