如何修改文本节点的HTML(类型3)/如何将其包装在HTML范围中

Question

在查找文本节点(nodeType = 3)时,如何修改其HTML？

从某种意义上说,假设文本节点的值(data或textContent)是This is textual content,如何用HTML包围它 - 说一个粗体标签......制作它This is textual content.

更改textContentHTML标记的写入 -<b>This is textual content</b>

如何使其呈现为This is textual content.

Javascript/Jquery

Answer 1

你的问题似乎是相当原始的DOM,但你提到了jQuery.

原始DOM的东西:

您可以创建b元素,将其插入文本节点之前,然后将文本节点移动到其中(实例):

function wrapNode(textNode, tagName) {
    var wrapper = document.createElement(tagName);
    textNode.parentNode.insertBefore(wrapper, textNode);
    wrapper.appendChild(textNode);
    return wrapper;
}

另一种方法是操纵innerHTML文本节点的父Element元素的属性,但是如果你这样做,请注意你以这种方式更新的任何后代元素都会被替换(所以新的元素将没有事件处理程序,因此附加到旧的元素) .

进一步阅读:

• DOM2核心规范 - 得到广泛支持
• DOM2 HTML规范 - 得到广泛支持
• DOM3核心规范 - 大多数都支持,但你需要功能检测一些东西
• HTML5 DOM接口 - 支持各不相同

jQuery的:

jQuery主要不会给你原始的文本节点,它更加Element集中.但是,你可能看它wrap,wrapAll和wrapInner功能.wrapInner可能最接近你想要的(实例):

$(parent_element_selector).click(function() {
  $(this).wrapInner("<b>").unbind("click");
});