JavaScript, вставляющий HTML-код - PullRequest
1 голос
/ 06 мая 2010

У меня есть ситуация, когда есть таблица, и вы можете добавить новую строку, нажав кнопку.Строка динамически генерируется сервером и передается обратно в HTML.В общем, что мне нужно сделать, это префикс новой строки к старой таблице.Примерно так:

tableelement.innerHTML = newHtml + tableelement.innerHTML;

Это, безусловно, работает, но у меня есть заголовок таблицы и, очевидно, мне нужно вставить новый HTML после него.Как бы я это сделал?insertBefore или insertAfter не могут помочь (afaik), потому что они предназначены для вставки элементов, а не для разобранного HTML.Так как же мне, имея объект из строки заголовка, вставить еще одну строку (в HTML) после нее (или до)?

Спасибо за ваши идеи

Ответы [ 4 ]

1 голос
/ 06 мая 2010

Использовать jQuery.after () .

В общем, познакомьтесь с jQuery , так как это фантастическая библиотека для такого рода вещей.

0 голосов
/ 29 июля 2010

Если новый HTML-элемент является просто строкой, ваш код был верным и без проблем. Но когда HTML-элемент содержит HTML-элемент DOM (особенно часть формы, такую ​​как input, textarea и т. Д.), Вы должны использовать метод document.createElement (). Если вы используете prototype и scriptaculous , вам следует попробовать Builder.node ().

/* using native DOM */
//create new row
var new_row = document.createElement('tr');
//create new column
var new_column = document.createElement('td');
//add a text to column or cell
new_column.innerHTML = 'my new string';
new_row.appendChild(new_column);
tableelement.insertBefore(new_row, tableelement.firstChild);

/* using prototype & script.aculo.us */
var new_cell = Builder.node('tr', [
    Builder.node('td', 'my new string')
]);
new Insertion.Top(tableelement, new_cell);
0 голосов
/ 06 мая 2010

Я бы подумал переосмыслить подход. innerHTML только для чтения для таблиц в Internet Explorer, поэтому вы обязательно столкнетесь с проблемами совместимости с вашим текущим методом. Вы могли бы реструктурировать свой код для создания элементов, используя DOM вместо указания innerHTML. Это довольно просто, намного эффективнее (не вызывает анализатор) и более кросс-браузерно совместимо.

Mozilla, похоже, согласна с Microsoft по этому поводу и цитирует документацию element.innerHTML:

[innerHTML] никогда не следует использовать для записи частей таблицы - для этого следует использовать методы W3C DOM, хотя его можно использовать для записи всей таблицы или содержимого ячейки.

Процесс включает использование методов DOM Level 2, table.insertRow() и tr.insertCell(). Для достойного чтения см. Динамическое построение таблиц (MSDN) .

Пример (из MDC):

function addRow(tableID)
{
  // Get a reference to the table
  var tableRef = document.getElementById(tableID);

  // Insert a row in the table at row index 0
  var newRow   = tableRef.insertRow(0);

  // Insert a cell in the row at index 0
  var newCell  = newRow.insertCell(0);

  // Append a text node to the cell
  var newText  = document.createTextNode('New top row')
  newCell.appendChild(newText);
}
0 голосов
/ 06 мая 2010

Какой контроль вы имеете на стороне сервера? Если у вас есть какой-либо контроль, я бы посоветовал вместо того, чтобы передавать обратно HTML со стороны сервера, возвращать данные для таблицы.

Тогда вы можете использовать JQuery или MooTools для динамической вставки структуры DOM в таблицу, а не HTML.

...