javascript inserting html code

Question

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

tableelement.innerHTML = newHtml + tableelement.innerHTML; 

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

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

Answer 1

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

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

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

Этот процесс включает использование методов уровня DOM уровня 2, table.insertRow() и tr.insertCell(). Для достойного чтения см. Building Tables Dynamically (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); 
} 

Answer 2

Используйте jQuery.after().

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

Answer 3

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

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

Answer 4

Если новый элемент 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);