0

I'm creating non-production HTML/CSS/jQuery prototypes. So no need for rock solid security etc.

The way I usually create dynamic HTML elements is to create string literals like this: 

var observation =
"<div id=\"first_observation\">" +
"<div class=\"row\">" +
"<div class=\"col-6\">" +
"<fieldset class=\"form-group row\">" +
"<div class=\"col-sm-10 offset-2\">" +
"<div class=\"row\">" +
"<div class=\"col-2\"> <h3>Type</h3> </div>" +
"</div>" +
"<div class=\"row\">" +
"<div class=\"col\">" +

etc . . . then I append the string to the DOM using jQuery.

I'm looking for either 1) a better way to do this 2) a way to highlight the HTML and format it in my text editor.

I'd prefer 2) in that I know you can create an objects with Javascript and set the attributes using object dot notation, but I find it's easiest to read "in HTML" when trying to work out layout issues.

Anybody know of a text editor or extension that would allow for this?

user1423857
  • 73
  • 9
  • 1
    if you're using es6, you can use **\`** (back quote) to capture a multi-line literal better. see https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript (as a bonus it will also allow you to interpolate values so it's great for brute templating via JS) – Ovidiu Dolha Apr 11 '18 at 14:23
  • I tried back quotes, I still don't get highlighting or automatic formatting though. – user1423857 Apr 11 '18 at 15:05

0 Answers0