Внутренняя работа innerHTML - PullRequest
Новая
       4

Внутренняя работа innerHTML

7 голосов
/ 19 мая 2011

Я пытался итеративно изменить innerHTML идентификатора, например: 

document.getElementById("test").innerHTML += "<br />"

и 

document.getElementById("test").innerHTML += "<table>" + blahblah + "</table>"

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

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

Мой вопрос:

Что именно innerHTML делает с тегами, которые я вставляю, детерминировано ли это, специфично для браузера?

Ответы [ 5 ]

5 голосов
/ 20 мая 2011

По моему опыту, большую часть времени браузер пытается исправить HTML 1 перед его внедрением в DOM. Если вы хотите построить <ul> так: 

someElement.innerHTML += '<ul>';
someElement.innerHTML += '<li>some li</li>';
someElement.innerHTML += '<li>some other li</li>';
someElement.innerHTML += '</ul>';

Например, Chrome, который привел бы к: 

<ul></ul>
 <li>some li</li>
 <li>some other li</li>
<ul></ul>

Таким образом, innerHTML может дать непредсказуемые результаты, потому что каждый раз, когда вы его используете, браузер корректирует HTML-код (и браузеры отличаются в том, как они это делают). Это особенно верно для элементов таблицы / таблицы (и особенно в IE (кстати, MS изобрела innerHTML;)). Если вы хотите, чтобы ваш html был абсолютно таким, каким вы предполагали его, придерживайтесь методов DOM (createElement / appendChild и т. Д.) Или сначала создайте строку полного элемента, который вы хотите вставить используя innerHTML, затем вставьте его, другими словами, не используйте innerHTML со строками, содержащими неполный HTML.

Чтобы завершить, я привожу из причудливого режима ППК :

Если вы удаляете элементы через innerHTML в IE, их содержание вытер и только сам элемент (т.е. открывающий и закрывающий теги) остаются. Если вы хотите удалить узлы что вы можете захотеть вставить позднее используйте методы DOM, такие как RemoveChild ()

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

1 голос
/ 20 мая 2011

Я столкнулся с подобной проблемой совсем недавно. Поскольку практически не было никакой полезной документации, мне пришлось учиться на собственном опыте. Здесь идет.

Похоже, что браузеры анализируют innerHTML, как только вносятся какие-либо изменения. В результате такого анализа любой недопустимый фрагмент HTML будет отклонен / добавлен и превращен в допустимый фрагмент!

Мораль истории : Всякий раз, когда вы изменяете innerHTML, убедитесь, что вставляемый HTML-код действителен. Таким образом, ...innerHTML += "<table> ... </table>" должен работать нормально, но ...innerHTML += "<table>"; ... .innerHTML += "<\table>" будет , вероятно , приведет к неожиданному поведению.

Это происходит потому, что в последнем случае, как только вы вставляете <table>, браузер анализирует строку и добавляет полный узел (таким образом, завершая ваш неполный код). Следовательно, все, что вы добавите позже, будет отображаться как элемент узла таблицы, а не как дочерний элемент, как вы изначально предполагали.

1 голос
/ 19 мая 2011

Хотя innerHTML является , а не частью w3c DOM, оно поддерживается всеми браузерами. Первоначально он просто добавил строку как есть к вашему элементу. Однако все основные браузеры изменяют вашу строку и делают ее допустимой HTML-разметкой. Это специфично для браузера и не явно определено ни в одном официальном стандарте. Мне нравится, как Mozilla объясняет работу innerHTML.

1 голос
/ 19 мая 2011

InnerHTML ничего не делает, но браузер может изменять все, что ему нравится.Вы можете увидеть это, если откроете страницу в Firefox и откроете Firebug вместе с ней.При просмотре HTML вы можете обнаружить, что некоторых элементов там больше нет.

Самое удивительное действие Firefox для новичка - изменить весь HTML на то, что выглядит как XHTML.

Что касается вашего метода, я не думаю, что это вообще отстой.Я думаю, что это действительно круто.Тогда спасибо!

И для этого есть голос: -)

0 голосов
/ 11 сентября 2018

По моему мнению, вы должны поместить текст не в doucumet.getElementByID («Имя»). InnerHTML Я думаю, вы должны просто вставить html.используйте знак над ~ это if you put in innerHTML something you can get some informations from API. Like me. In script tag. I used console.log and document.getElementById console.log('ID: ' + profile.getId()); console.log('Name: ' + profile.getName()); document.getElementById("Name").innerHTML =+profile.getName()+ `

...