В jQuery HTML () - все и innerHTML будет

могу ли я полностью полагаться на jQuery html() метод ведет себя идентично innerHTML? Есть ли разница между innerHTML и jQuery html() способ? Если эти методы оба делают то же самое, могу ли я использовать jQuery html() метод вместо innerHTML?

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

приложение работает нормально на Firefox но Internet Explorer выдает ошибку:unknown runtime exception. Я использовал jQuery html() способ и IEошибка исчезла. Но я не уверен, что это будет работать для всех браузеров, и я не уверен, следует ли заменить все innerHTML свойства с jQuery html() метод.

Спасибо большое.

7 71
javascript html jquery dom innerhtml

7 ответов:

чтобы ответить на ваш вопрос:

.html() просто позвоню .innerHTML после выполнения некоторых проверок для типов узлов и прочее. Он также использует try/catch блок, где он пытается использовать innerHTML во-первых, и если это не удастся, он будет отступать изящно к jQuery .empty() + append()

97

в частности, относительно "могу ли я полностью полагаться на метод jQuery html (), который он будет выполнять как innerHTML" мой ответ-нет!

запустите это в internet explorer 7 или 8, и вы увидите.

jQuery создает плохой HTML при установке HTML, содержащего тег

, вложенный в тег

, где начало строки является новой строкой!

здесь есть несколько тестовых случаев, и комментарии при запуске должны быть достаточно понятными. Это довольно неясно, но не понимая, что происходит, это немного смущает. Я собираюсь подать отчет об ошибке.

<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>
15

innerHTML не является стандартным и может не работать в некоторых браузерах. Я использовал html () во всех браузерах без проблем.

6

если вы задаетесь вопросом о функциональности, то jQuery .html() выполняет то же самое предназначены функции как .innerHTML(), но он также выполняет проверки на кроссбраузерность.

по этой причине всегда используйте jQuery .html() вместо .innerHTML() там, где это возможно.

6

"этот метод использует свойство innerHTML браузера."- jQuery API

http://api.jquery.com/html/

3

учитывая общие поддержка .innerHTML в эти дни, единственное эффективное различие сейчас является то, что .html() будет выполнить код в любом <script> теги если есть какие-либо в html вы даете его. .innerHTML,под HTML5 не будет.

С документы jQuery:

по дизайну, любой конструктор или метод jQuery, который принимает строку HTML-jQuery (),.добавлять. ,)(после () и т. д. - может выполнять код. Это может произойти путем введения тегов скрипта или использования атрибутов HTML, которые выполняют код (например,<img onload="">). Не используйте эти методы для вставки строк, полученных из ненадежных источников, таких как параметры URL-запроса, файлы cookie или входные данные формы. Это может привести к возникновению уязвимостей межсайтового скриптинга (XSS). Удалите или экранируйте любой пользовательский ввод перед добавлением содержимого в документ.

Примечание:.innerHTML и .html() может выполнять js другими способами (например,onerror атрибут.)

1

вот некоторый код, чтобы вы начали. Вы можете изменить поведение .innerHTML -- вы даже можете создать свой собственный полный .innerHTML прокладка. (С. П.: переосмысление .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)

http://jsfiddle.net/DLLbc/9/

0