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

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

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

谢谢，詹姆斯

Answer 1

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

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

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

编辑：
如果您正在使用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]);
}

操作包含除innerHTML以外的文本和其他节点的DOM节点

2 个答案: