Javascript функция для анализа строки HTML в DOM?

Question

Есть ли хорошая функция или класс JS, которые могут беспрепятственно анализировать строку HTML в DOM без сброса существующего содержимого?Я пытаюсь найти простой способ дублировать сложную строку таблицы в верхней части таблицы.

Очевидно, это будет работать так:

element.innerHTML = newHTML + element.innerHTML;

Однако это вызывает браузерперезагрузить всю таблицу, которая сбрасывает позицию прокрутки и удаляет любое несохраненное редактируемое содержимое в таблице.

ОБНОВЛЕНИЕ:

Я не использую jQuery для этого проекта.Вот идея, которую я где-то нашел, но не могу заставить ее работать:

var templateRow = document.getElementById( 'templateRow' );
var newhtml = "<tr id='row"+lastID+"'>"+'templateRow'.innerHTML+"</tr>";
var range = document.createRange();
range.selectNode( 'templateRow' );
var parsedHTML = range.createContextualFragment( newhtml );
templateRow.appendChild( parsedHTML )

Answer 1

Вы пытаетесь вставить контент в существующий элемент, не нарушая контент, который уже находится там?

Самый простой ответ - insertAdjacentHTML.Это расширение для сценариев IE, поскольку оно стандартизировано HTML5:

mydiv.insertAdjacentHTML('afterBegin', '<p>Some new stuff</p><p>to prepend</p>');

К сожалению, оно не везде реализовано.Таким образом, в другом месте вам нужно создать новый элемент, установить на него innerHTML и затем передать содержимое в цель:

var container= document.createElement('div');
container.innerHTML= '<p>Some new stuff</p><p>to prepend</p>';
while (container.lastChild)
    mydiv.insertBefore(container.lastChild, mydiv.firstChild);

Если у вас много нового контента, это будет медленно.Вы можете ускорить его в браузерах, поддерживающих DOM Range, создав Range для нового содержимого, извлекая его в DocumentFragment и вставляя этот фрагмент в целевой узел за один раз.

К сожалению (опять же),используют insertAdjacentHTML или innerHTML, есть элементы, на которые IE <9 не будет устанавливать HTML: особенно <code><table> и его отношения.Таким образом, в этом случае вы должны заключить HTML в подходящую оболочку для имени элемента:

container.innerHTML= '<table><tbody>'+newRowsHTML+'</tbody></table>';

, а затем извлечь содержимое из внутреннего элемента, чтобы поместить его в цель.

хорошо, что в случае таблиц, если у вас много новых строк, вы можете поместить их в одно тело <tbody> и insertBefore / appendChild, чтобы поместить все строки за один раз, что быстрее, чемодин-на-один.

Answer 2

^{ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: В наши дни я не пишу код из jQuery. Просто потому, что я ненавижу преследовать причуды браузера между использованием свойства A в этом браузере и свойства B в этом. Тем не менее, это работает в Firefox, но больше о понятии концепции. Я просто хотел быть как можно более искренним.}

DEMO

По сути, вы делаете следующее:

1. Имейте в своем <table>, который содержит все «оригинальные» / «незапятнанные» данные, с которыми вы не хотите связываться. ^[table1]
2. Вставьте строку с дополнительными данными, которые вам нужно вставить в эту исходную таблицу, не манипулируя (или иным образом препятствуя) тому, что уже происходит с таблицей1. ^[SampleData]
3. Создайте новый <table> ^[table2] и добавьте его в документ (но стилизуйте его так, чтобы он был полностью невидим). В зависимости от содержимого строки, вы можете использовать <div>, но какой бы метод вы ни использовали, он должен быть невидимым (в конце концов, все, что мы используем, - это возможность разбирать строку html, используя innerHTML).
4. Теперь возьмите содержимое этой новой <table> ^[table2] (или <div>) и используйте javascript и DOM для отправки этих элементов в новую таблицу.

Это позволит избежать повторного использования innerHTML на новом столе, что приведет к перезагрузке и потере всего, что уже происходит.

Answer 3

Искренне спасибо за все ответы, некоторые из которых довольно подробны. Мне удалось решить эту проблему с помощью комбинации table.insertRow () и innerHTML. Кажется, это самое быстрое и самое чистое решение проблемы. Надеюсь, что и другие ответы на этой странице помогут кому-то еще!

Вместо того, чтобы обновлять HTML всей таблицы, мы добавляем новую строку в DOM и вставляем HTML в нее:

function $(id){ //just a shortcut function
    return document.getElementById(id);
}

var lastID = 10;  //id number of last table row

function addRow(){
    var newhtml = $('templateRow').innerHTML); //copy the template row
    var t = $('aTable').insertRow(2) //insert a row in the desired position
    t.id = 'row'+lastID; //update the new tr's id
    t.innerHTML = newhtml //replace the innerHTML of the new row
    lastID++; //increment the counter for next time
}

Answer 4

function parseHTML(html) {
    var el = document.createElement("div");
    el.innerHTML = html;

    return el.childNodes;
}

var nodes = parseHTML("<span>Text</span>");

Answer 5

innerHTML это путь.Возможно, вы могли бы попробовать сбросить внутренний HTML только из тех <td>, которые вы меняете, и посмотреть, дает ли это нужный эффект?

Вы также можете взглянуть на методы манипулирования таблицами в ДОМ.

Answer 6

Мне кажется, я понимаю, что вы пытаетесь сделать. Если вам нужна библиотека .NET, которая позволит вам легко проанализировать HTMl, попробуйте Html Agility Pack

Вы можете анализировать html так же, как вы анализируете xml, используя API XMLDocument в .NET. Это DLL-библиотека .NET, поэтому вам придется делать это на стороне сервера грубо. Если вам нужно, чтобы DOM манипулировали без обратной отправки, вы всегда можете создать службу на веб-сервере и сделать вызов ajax, включающий html.

Имеет ли это смысл?

Answer 7

Используйте, например, jQuery (документация для конкретного метода - с примерами - это здесь ):

var your_html_code = '<table>...</table>';

, затем используйте его так:

jQuery(your_html_code);

См. Больше в страницах с похожими вопросами .

Answer 8

Вы изучили J Запрос (если вам разрешено его использовать)?