I have a large HTML string contained in a
var. I'm using it to write to
The first example (with backtick syntax), which is the simplest, does not work in Internet Explorer 11.
Is there a way to get the first example to work in Internet Explorer 11 without having to use an array or newline characters?
<div id="display"></div> var message = ` <p>this</p> <p>is</p> <p>a</p> <p>multiline</p> <p>string</p> `; // Write Message var display = document.getElementById('display'); display.innerHTML = message;
var message = ['<p>this</p>', '<p>is</p>', '<p>a</p>', '<p>multiline</p>', '<p>string</p>' ].join('\n');
Single quote ' with linebreak \
var message = '<p>this</p> \ <p>is</p> \ <p>a</p> \ <p>multiline</p> \ <p>string</p>' ;
The backtick syntax for a string is a Template Literal, which allows for interpolation of variables within a string and multiline strings. They are not supported by Internet Explorer 11 (see more here: ECMAScript 6 compatibility table).
It is not the most elegant solution, but I solved this myself by minifying my multiline template (Vue) string, and encompassing it within single quotes instead of back ticks. This can be automated as part of the build step, so your code still looks legible for development.
Also ensure that any inner strings (like classNames, etc.) are double quoted so you don't accidentally terminate the string, thereby causing template errors.
©2020 All rights reserved.