javascript - 如何将html标签放入文本节点

Question

好的，我有这个 jsfilddle 上的所有内容 http://jsfiddle.net/U67hC/

我的问题是 <ins>和</ins>添加到环绕文本中，应该是 HTML，但显示为纯文本。仅当通过 parseHTML 创建对象后添加。如果我在解析之前将其添加到文本中，它会显示为良好的 html。如何将其添加到环绕文本中，然后使其被识别为 HTML？

::编辑::

我有一个项目要添加到这里作为原始问题的分支，该系统当前适用于下面的集合，但是如果您在 test31 之后添加任何文本，我需要将其断开并将该文本推送到单独的节点中。有没有办法在创建新的 ins 节点后，通过允许函数循环继续然后命中下一组，来获取循环中的其余文本并打破循环，同时为父级创建一个新的文本节点文本？

类似于

• 循环文本
• 查找要突出显示的文本(创建新节点并在当前文本节点之后分配
• 检索循环中剩余的文本
• 将剩余文本插入ins节点后的新文本节点
• 函数获取这个新的文本对象并运行它

::结束编辑::

代码如下:

$(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

文本节点仅包含文本。

如果您想在文本节点中间插入 HTML 元素，那么您必须:

1. 删除第一个文本节点的后半部分文本
2. 处理新元素
   1. 使用 document.createElement 创建它
   2. 使用 document.createTextNode 创建一个文本节点及其内容
   3. 将新文本节点附加到元素节点
   4. 将元素节点追加到原始文本节点旁边
3. 创建一个新的文本节点(其中包含已删除的文本)并将其附加到新元素节点旁边