使用非 innerHTML 操作包含文本和其他节点的 DOM 节点答案

【问题标题】：Manipulating a DOM node containing text and other nodes with other than innerHTML使用非 innerHTML 操作包含文本和其他节点的 DOM 节点
【发布时间】：2011-08-22 16:11:44
【问题描述】：

我想知道是否有一种方法可以复制 DOM 节点，这样既可以分割节点的文本部分，又可以保持该节点中包含的节点完好无损。我有一个函数，它需要一个段落，从中分离第一个字母，然后创建一个新节点，将包裹在一个新节点中的那个字母添加到它，然后插入其余的文本。问题是，当该段落包含其他 HTML 元素时，它们会被展平为字符串，因为我使用 innerHTML 提取文本。我需要它们保留 DOM 节点。函数如下：

function createDropCappedParagraph(article) {
    pars = article.getElementsByTagName("p");
    first_par = pars[0];
    var text = first_par.innerHTML;
    text = text.trim();
    var first_letter = text.substr(0,1)
    text = text.slice(1);
    var t = document.createTextNode(text);
    var dropcap = document.createElement("span");
    dropcap.className = "dropcap";
    dropcap.innerHTML = first_letter
    var dcpar = document.createElement("p");
    dcpar.style.position = "relative";
    dcpar.appendChild(dropcap);
    dcpar.appendChild(t);
    article.insertBefore(dcpar, pars[0]);
    article.removeChild(pars[1]);
}

这是应用此效果时的样子，请注意第一段中扁平化的 a href 链接：

http://legibilis.heroku.com/start-here

谢谢，詹姆斯

【问题讨论】：

标签： javascript dom innerhtml

【解决方案1】：

您的问题是您使用此字符串创建TextNode，因此所有特殊字符（例如、“等）都被转义（意味着它们被转换为安全对应物：&lt; 、&gt;、&quot; 等）。

这是一个简单解决方法的想法：

创建一个名为 t 的普通 HTML 节点，而不是创建一个名为 t 的 TextNode。例如，将其设为“div”标签。然后，修改这个标签的.innerHTML字段：t.innerHTML = text;。这不应该逃避内容，AFAIK，并且 div 标签不应该打扰你（默认情况下它是内联的）。

编辑：
如果您使用 jQuery，$(text) 将为您提供用于 text 内容的 jQuery 元素（或多个元素）。

【讨论】：

感谢回复，我试试看。顺便说一句，我虽然默认情况下'div'是一个块元素？ (en.wikipedia.org/wiki/Span_and_div)
@user906230：嗯，看来你可能是对的。我在某些网站上读错了。如果我的回答很好，点赞和“接受”可能会很好:) 谢谢。

【解决方案2】：

成功了，谢谢：

function createDropCappedParagraph(article) {
    pars = article.getElementsByTagName("p");
    first_par = pars[0];
    var text = first_par.innerHTML;
    text = text.trim();
    var first_letter = text.substr(0,1)
    text = text.slice(1);
    var t = document.createElement("span");
    t.innerHTML = text;
    var dropcap = document.createElement("span");
    dropcap.className = "dropcap";
    dropcap.innerHTML = first_letter
    var dcpar = document.createElement("p");
    dcpar.style.position = "relative";
    dcpar.appendChild(dropcap);
    dcpar.appendChild(t);
    article.insertBefore(dcpar, pars[0]);
    article.removeChild(pars[1]);
}

【讨论】：