Управление узлом DOM, содержащим текст, и другими узлами, отличными от innerHTML - PullRequest
Новая
       8

Управление узлом DOM, содержащим текст, и другими узлами, отличными от innerHTML

0 голосов
/ 22 августа 2011

Я хотел бы знать, есть ли способ скопировать 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

Спасибо, Джеймс

Ответы [ 2 ]

0 голосов
/ 24 августа 2011

Сработало, спасибо: 

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]);
}
0 голосов
/ 22 августа 2011

Ваша проблема в том, что вы используете эту строку для создания TextNode, и поэтому все специальные символы (такие как <,>, "и т. Д.) Экранируются (это означает, что они преобразуются в их безопасные аналоги: &lt; , &gt;, &quot; и т. Д.).

Вот идея простого обходного пути:

Вместо создания TextNode с именем t создайте обычный HTML-узел с именем t. Например, сделайте это тегом div. Затем измените поле .innerHTML этого тега: t.innerHTML = text;. Это не должно ускользать от содержимого, AFAIK, и тег div не должен вас сильно беспокоить (он встроен по умолчанию).

EDIT:
Если вы используете jQuery, $(text) даст вам элемент (или элементы) jQuery для содержимого text.

...