how to get html tags into a text node

Question

OK I have everything on this jsfilddle http://jsfiddle.net/U67hC/

My question is that the <ins> and </ins> are added to surround text and should be HTML but is showing as plain text. Only when added after the object is created through parseHTML . If I added this to the text before I parse, it shows as good html. How do I add this to surround text and then make it be recognized as HTML?

::EDIT::

I have a item to add here as a branch to the original question, This system works currrently for the set below however if you add any text after test31 I need to break it off and push that text into a seperate node. Is there a way to get the rest of the text in the loop and break out of the loop while createing a new text node to the parent after the new ins node is created there by allowing the function loop to continue and then hit the next set of text?

Something like

• loop through text
• find text to highlight (creates new node and assigns after current text node
• retrieve remaining text in loop
• push remaining text into new text node after ins node
• function grabs this new text obj and runs through it

::END EDIT::

Code below:

$(function () {
    var array = [];
    var count = 0;
    step_through_array($.parseHTML('<div>test1<strong><img src="">test2 test32</strong>test3<p>test4</p></div><p><ins>test5</ins></p>'));
    var obj = $.parseHTML('<div>test1<strong>test2 test31</strong>test3<p>test4</p></div><p><ins>test5</ins></p>');
    step_through(obj);
    $('#content').html(obj);

    function step_through(obj) {
        $.each(obj, function () {
            if (this.childNodes.length != 0) {
                step_through(this.childNodes);
            } else if (this.nodeName == '#text') {
                var data_set = '';
                $.each(this.data.split(' '), function (name, value) {
                    if (array[count] == value) {
                        data_set += value + ' ';
                    } else {
                        /*tags added here*/
                        var new_obj = document.createElement('ins');
                        new_obj.appendChild(document.createTextNode(value));
                        $(curr_obj).after(new_obj);
                    }
                    count++;
                });
                this.data = data_set;
            }
        });
    }

    function step_through_array(obj) {
        $.each(obj, function () {
            if (this.childNodes.length != 0) {
                step_through_array(this.childNodes);
            } else if (this.nodeName == '#text') {
                $.each(this.data.split(' '), function (name, value) {
                    array.push(value);
                });
            }
        });
    }
});

Answer 1

A text node contains only text.

If you want to insert an HTML element in the middle of a text node then you must:

1. Delete the second half of the text from the first text node
2. Deal with the new element
   1. Create it with document.createElement
   2. Create a text node with its content using document.createTextNode
   3. Append the new text node to the element node
   4. Append the element node next to the original text node
3. Create a new text node (with the deleted text in it) and append it next to the new element node