javascript - 如何修改文本节点的HTML(类型3)/如何将其包装在HTML跨度中

找到文本节点(nodeType = 3)时，如何修改其HTML？

从某种意义上说，假设文本节点的值(数据或textContent)是This is textual content，如何用HTML包围它-说一个粗体标记...使其成为 This is textual content 。

更改textContent也会写出HTML标记-<b>This is textual content</b>
如何使其呈现为 This is textual content 。

Javascript/jQuery

最佳答案

您的问题似乎是相当原始的DOM，但您提到了jQuery。

原始DOM内容:

您可以创建b元素，将其插入文本节点之前，然后将文本节点移入其中(live example):

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

另一种方法是操纵文本节点的父innerHTML的Element属性，但是如果您这样做，则将替换以这种方式更新的任何后代元素(因此，新的后代元素将不具有事件处理程序，并且此类附加到旧的处理程序上)那些)。

进一步阅读:

DOM2 Core spec-广泛支持的

DOM2 HTML spec-广泛支持的

DOM3 Core spec-大部分受支持，但是您需要对

进行特征检测

HTML5 DOM interfaces-支持不同的

jQuery的:

jQuery通常不会给您原始文本节点，而是以Element为重点。但是您可能会看一下它的 wrap ， wrapAll 和 wrapInner 函数。 wrapInner可能最接近您想要的(live example):

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