如何将HTML标记放入文本节点
how to get html tags into a text node
好了,jsfilddle上的内容都准备好了http://jsfiddle.net/U67hC/
我的问题是,<ins>
和</ins>
被添加到环绕文本,应该是HTML,但显示为纯文本。仅在通过parseHTML
创建对象后添加。如果在解析之前将其添加到文本中,则显示为良好的html。我如何将此添加到环绕文本,然后使其被识别为HTML?
::编辑::
我有一个项目要添加到这里作为原始问题的分支,这个系统目前适用于下面的集合,但是如果你在test31之后添加任何文本,我需要将其断开并将该文本推送到一个单独的节点。是否有一种方法可以在循环中获取文本的其余部分并跳出循环,同时创建一个新的文本节点到父节点后,允许函数循环继续,然后点击下一组文本?
之类的- 循环通过文本
- 查找要突出显示的文本(创建新节点并在当前文本节点后分配)
- 检索循环中剩余的文本
- 将剩余文本推送到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);
});
}
});
}
});
文本节点只包含文本。
如果你想在文本节点中间插入一个HTML元素,那么你必须:
- 从第一个文本节点删除文本的后半部分
- 处理新元素
- 创建
document.createElement
- 使用
document.createTextNode
创建包含其内容的文本节点 - 将新的文本节点附加到元素节点
- 将元素节点附加到原始文本节点旁边
- 创建
- 创建一个新的文本节点(其中包含已删除的文本),并将其附加到新的元素节点
相关文章:
- Javascript,将文本添加到具有现有文本节点的元素中
- 拆分文本节点
- 使用TreeWalker检索非Javascript文本节点
- jquery在元素中查找文本节点,并使用标记进行连接和包装
- JavaScript 文本节点属性
- 获取文本节点的宽度
- 如何将由
分隔的文本节点与它们自己的标记包装起来
- 如何返回jQuery对象中的文本节点
- 包装和打开jquery后合并文本节点
- 有没有一种方法可以在javascript中为文本节点添加属性
- 使用文本节点打印段落
- 计算文本节点中的字母数
- 正则表达式:仅在标记中匹配文本节点
- "“错误”;导致故障的文本节点
- 正在创建文本节点
- jQuery,如何测试一个变量是一个文本节点,不包含任何标记
- 使用 casperjs 抓取文本节点的最快方法
- 如何在文本节点中保留空格
- 如何获取文档片段中的所有文本节点
- 选择“相邻同级”而不干预文本节点