evitar que función me tome un texto como texto plano

[catpaw]

Que tal forer@s, necesito sus conocimientos, ya que los mios son verdes aun, veran:

De alguna manera una función toma el texto que encuentre entre las etiquetas <li> y </li> y lo muestra en un organigrama, si tuviera <li><ul><li></li></ul></li> la funcion es capas de identificar la estructura y crear el organigrama de los niveles segun listas encuentre.

Bueno aqui mi problema es que, como comento, el texto que encuentre entre <li></li> lo toma, pero lo toma algo asi como texto plano, es decir si yo pongo alguna etiqueta a este texto simplemente la "desecha", por ejemplo:

Código HTML:

<li>
     nivel <b>1</b><br />
     <b>nombre del nivel</b>
</li> 

ese texto saldría en una sola linea y sin las negritas

Y pues por requerimientos necesito poder darle cierto formato a ese texto.

La parte de la funcion que hace el cambio o toma el texto es esta:

Código Javascript:

$.fn.orgChart = function(options, $appendTo) {
    var opts = $.extend({}, $.fn.orgChart.defaults, options);
 
    return this.each(function() {
      $this = $(this);
      var $container = $("<div class='" + opts.chartClass + "'/>"); //aca busca el contenedor de las listas
      if($this.is("ul")) {
        buildNode($this.find("li:first"), $container, 0, opts); //pregunta si es el primer li y le asigna la funcion builNodes
      }
      else if($this.is("li")) { //si no es el primer li, le asigna la misma funcion pero con otros parametros
        buildNode($this, $container, 0, opts);
      }
      $appendTo.append($container);
    });
  };
 
  $.fn.orgChart.defaults = {
    depth      : -1,
    stack      : false,
    chartClass : "orgChart",
    hoverClass : "hover",
    nodeText   : function($node) {return "";}
  };
 
  function buildNode($node, $appendTo, level, opts) {
    var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
    var $tbody = $("<tbody/>");
 
    // Make this node...
    var $nodeRow = $("<tr/>").addClass("nodes");
    var $nodeCell = $("<td/>").addClass("node").attr("colspan", 2);
    var $childNodes = $node.children("ul:first").children("li");
    if($childNodes.length > 1) {
      $nodeCell.attr("colspan", $childNodes.length * 2);
    }
    [B]var $heading = $("<h2>").text(opts.nodeText($node));[/B] //aqui creo que es donde toma el texto lo guarda en la variable heading
    [B]$nodeDiv = $("<div>").addClass("node").append($heading);[/B] //aqui al texto lo asigna a un div y a este le pone la clase que lo muestra como una cajita
    $nodeCell.append($nodeDiv); //aca me supongo que dibuja las lineas que conectan las cajitass
    $nodeRow.append($nodeCell);
    $tbody.append($nodeRow);
 
...
 

Bueno a mi poco conocimiento y mi entender creo que en estas lineas esta el asunto

var $heading = $("<h2>").text(opts.nodeText($node));
$nodeDiv = $("<div>").addClass("node").append($heading);

heading es el texto "en plano" entonces .text quita las etiquetas o como??

si alguien me puede dar su punto de vista se los agradeceré infinitamente

[Dradi7]

trata de cambiar haber el .text por .html

[catpaw]

ya probé así y tampoco toma en cuenta las etiquetas :/

[catpaw]

Bueno que parece que ya lo resolví lo que hice fue:

//var $heading = $("<h2>").text(opts.nodeText($node)); //comentar esta linea
$nodeDiv = $("<div>").addClass("node").append($node); //en lugar de hacer el append a $heading se lo hago $node

Y funciona, sigo sin saber porque :$

ahora el siguiente reto es poner una imagen