How to insert and show html code in jQuery Terminal?

Question

I want to use this code but changing the textArea to a divor any other jQuery terminal situable object to show it in term.echo().

I'm doing that by changing html line 1 for <div id="txtA"></div>

and line 7 of javascript for document.getElementById('txtA').innerHTML = diff;

Can I show html in the jQuery Console?

Something like term.echo('<span id=\"txtA\"></span>') ?? I'm getting the code like if I were using <pre></pre>

Thanks.

Answer 1

Use this code, raw will output raw html into terminal and finalize will be called when node is added so you can modify it, finalize will also be called when terminal is resized.

term.echo('<span id=\"txtA\"></span>', {
  raw: true,
  finalize: function(div) {
    document.getElementById('txtA').innerHTML = diff;
    // or using jQuery
    div.find('#txtA').html(diff);
  }
});

Note that if you want just to echo html you only need to specify a raw option:

term.echo('<h1>my header</h1>', { raw: true });

EDIT: from version 2.9.0

You can echo DOM nodes and jQuery objects.

term.echo($('<span id="txtA"></span>'));

Note that if you don't want to lose your content on resize you still need to use finalize options.