javascript - Adding "literal HTML" to an HTML widget with data from a datasource? -

when creating html widget in freeboard, following text displayed:

can literal html, or javascript outputs html.

i know can following return html data, if want more complex i'd prefer use literal html

return html data

return "<div style='color: red'>this red timestamp: " + datasources["ds"]["timestamp"] + "</div>"

literal html no data

<div style='color: red'>   red text. </div> <div style='color: blue'>   blue text. </div> 

both of work. question is, how can insert data datasource literal html example?

for more context, here @ top of editor:

this javascript re-evaluated time datasource referenced here updated, , value return displayed in widget. can assume javascript wrapped in function of form function(datasources) datasources collection of javascript objects (keyed name) corresponding current data in datasource.

and here default text:

// example: convert temp c f , truncate 2 decimal places. // return (datasources["mydatasource"].sensor.tempinf * 1.8 + 32).tofixed(2); 

i don't know freeboard framework, generic solution use html5 templates, if browser support requirements allow it.

function supportstemplate() {    return 'content' in document.createelement('template');  }    if (supportstemplate()) {    alert('browser supports templates');  } else {    alert('browser not support templates');  }    var template = document.queryselector('#timestamp-template');    var timestamp = template.content.queryselector('.timestamp');  timestamp.innerhtml = new date().tolocalestring();    var clone = document.importnode(template.content, true);    var output = document.queryselector('#output');  output.appendchild(clone);

<template id="timestamp-template">    <div style='color: red' class="timestamp">      default red text.    </div>    <div style='color: blue'>      blue text.    </div>  </template>      <div id="output"></div>

you need adapt strategy support whatever data sources , transforms project needs.

failing support html5 template elements, use <script type="text/template">.