使用innerHTML以外的方式操作包含文本和其他节点的DOM节点

Question

我想知道是否有一种方法可以复制 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

谢谢， 詹姆斯

Answer 1

您的问题是，您使用此字符串创建 TextNode，因此所有特殊字符（例如 <、>、" 等）都会被转义（意味着它们会转换为安全的对应字符） 、" 等）

。

：<、> 创建一个TextNode 名为 t，创建一个名为 t 的普通 HTML 节点，例如，将其设为“div”标签，然后修改该标签的 .innerHTML 字段：t。 ，这不应该转义内容，并且 div 标签也不会给您带来太多麻烦（默认情况下它是内联的）。

.innerHTML = text;。据我所知
如果您使用 jQuery，$(text) 将为您提供 text 内容的 jQuery 元素（或多个元素）。

Answer 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]);
}