Могу ли я полностью полагаться на метод jQuery html(), похожий на innerHTML? Есть ли разница между методом innerHTML и jQuery html()? Если эти методы делают то же самое, могу ли я использовать метод jQuery html() вместо innerHTML?
Моя проблема: я работаю над уже разработанными страницами, страницы содержат таблицы, а в JavaScript свойство innerHTML используется для динамического их заполнения.
Приложение отлично работает в Firefox, но Internet Explorer вызывает ошибку: unknown runtime exception. Я использовал метод jQuery html(), и ошибка IE исчезла. Но я не уверен, что он будет работать для всех браузеров, и я не уверен, заменить ли все свойства innerHTML на метод jQuery html().
Большое спасибо.
Чтобы ответить на ваш вопрос:
.html() просто вызовет .innerHTML после выполнения некоторых проверок для nodeTypes и т.д. Он также использует блок try/catch, где он сначала пытается использовать innerHTML, и если это не удается, оно будет изящно отходить в jQuery .empty() + append()
В частности, в отношении "Могу ли я полностью полагаться на метод jquery html(), который будет работать как innerHTML", мой ответ NO!
Запустите это в Internet Explorer 7 или 8, и вы увидите.
jQuery создает плохой HTML при установке HTML, содержащего <FORM> тег, вложенный в <P> тег, где начало строки является новой строкой!
Здесь есть несколько тестовых примеров, и комментарии при запуске должны быть достаточно понятными. Это довольно неясно, но не понимание того, что происходит, немного сбивает с толку. Я собираюсь подать отчет об ошибке.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function() {
// the following two blocks of HTML are identical except the P tag is outside the form in the first case
var html1 = "<p><form id='form1'><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></form></p>";
var html2 = "<form id='form1'><p><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></p></form>";
// <FORM> tag nested within <P>
RunTest("<FORM> tag nested within <P> tag", html1); // succeeds in Internet Explorer
RunTest("<FORM> tag nested within <P> tag with leading newline", "\n" + html1); // fails with added new line in Internet Explorer
// <P> tag nested within <HTML>
RunTest("<P> tag nested within <FORM> tag", html2); // succeeds in Internet Explorer
RunTest("<P> tag nested within <FORM> tag with leading newline", "\n" + html2); // succeeds in Internet Explorer even with \n
});
function RunTest(testName, html) {
// run with jQuery
$("#placeholder").html(html);
var jqueryDOM = $('#placeholder').html();
var jqueryFormSerialize = $("#placeholder form").serialize();
// run with innerHTML
$("#placeholder")[0].innerHTML = html;
var innerHTMLDOM = $('#placeholder').html();
var innerHTMLFormSerialize = $("#placeholder form").serialize();
var expectedSerializedValue = "field1=111&field2=222";
alert( 'TEST NAME: ' + testName + '\n\n' +
'The HTML :\n"' + html + '"\n\n' +
'looks like this in the DOM when assigned with jQuery.html() :\n"' + jqueryDOM + '"\n\n' +
'and looks like this in the DOM when assigned with innerHTML :\n"' + innerHTMLDOM + '"\n\n' +
'We expect the form to serialize with jQuery.serialize() to be "' + expectedSerializedValue + '"\n\n' +
'When using jQuery to initially set the DOM the serialized value is :\n"' + jqueryFormSerialize + '\n' +
'When using innerHTML to initially set the DOM the serialized value is :\n"' + innerHTMLFormSerialize + '\n\n' +
'jQuery test : ' + (jqueryFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED") + '\n' +
'InnerHTML test : ' + (innerHTMLFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED")
);
}
</script>
</head>
<div id="placeholder">
This is #placeholder text will
</div>
</html>
Если вам интересно о функциональности, тогда jQuery .html() выполняет те же функции, что и .innerHTML(), но также выполняет проверки совместимости между браузерами.
По этой причине всегда используйте jQuery .html() вместо .innerHTML(), где это возможно.
innerHTML не является стандартным и может не работать в некоторых браузерах. Я использовал html() во всех браузерах без проблем.
"Этот метод использует свойство браузера innerHTML." - API jQuery
Вот вам какой-то код, чтобы вы начали. Вы можете изменить поведение .innerHTML - вы могли бы даже создать свой собственный .innerHTML-прокладку. (P.S.: redefining.innerHTML также будет работать в Firefox, но не в Chrome - они работают над ним.)
if (/(msie|trident)/i.test(navigator.userAgent)) {
var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
Object.defineProperty(HTMLElement.prototype, "innerHTML", {
get: function () {return innerhtml_get.call (this)},
set: function(new_html) {
var childNodes = this.childNodes
for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
this.removeChild (childNodes[0])
}
innerhtml_set.call (this, new_html)
}
})
}
var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)
document.body.innerHTML = ""
console.log (mydiv.innerHTML)