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

时间:2014-03-31 03:32:40

标签: javascript jquery html

好的,我在这个jsfilddle http://jsfiddle.net/U67hC/

上有所有内容

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

:: EDIT ::

我有一个项目在这里作为原始问题的分支添加,这个系统正好适用于下面的集合,但是如果你在test31之后添加任何文本我需要将其分解并将该文本推送到一个单独的节点。有没有办法在循环中获取剩下的文本并在创建新的文本节点后通过允许函数循环继续然后点击下一组创建新的文本节点来创建新的文本节点文字?

这样的东西
  • 循环播放文字
  • 找到要突出显示的文本(创建新节点并在当前文本节点之后分配
  • 在循环中检索剩余文本
  • 在ins节点
  • 之后将剩余文本推送到新文本节点
  • 函数抓取这个新文本obj并贯穿它

:: END EDIT ::

以下代码:

$(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);
                });
            }
        });
    }
});

1 个答案:

答案 0 :(得分:0)

文本节点仅包含文本。

如果要在文本节点的中间插入HTML元素,则必须:

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