innerHTML кажется единственным хорошим решением для этого

У меня есть функция, создающая HTML/CSS MessageBox, где я хочу отобразить переменную (уже экранированную с помощью PHP json_encode(), инъекция XSS невозможна). Я хочу отобразить эту переменную в жестко запрограммированном сообщении, это всегда одно и то же сообщение. Сообщение отображает эту переменную между полужирными HTML-тегами <b></b>:

Message("Do you really want to delete <b>" + reference + "</b> ?");

Строка, переданная функции Message(), будет добавлена ​​в тег div, и единственное решение, которое у меня есть, — это использовать innerHTML, если я хочу, чтобы ссылка на переменную отображалась жирным шрифтом.

Многие люди говорят: «Не используйте innerHTML, он не нормализован», «Это проприетарная функция Microsoft, это не W3C и, возможно, больше не будет поддерживаться».

Я всегда использовал методы DOM, но в моем случае свойство DOM1 myDiv.firstChild.nodeValue или даже метод DOM3 myDiv.textContent не будут работать, потому что строка отображается только как текст.

Преимущество метода innerHTML заключается в том, что он не пропускает <>characters с объектами HTML, и, к сожалению, я думаю, что невозможно получить тот же результат с помощью методов DOM.

Я не могу использовать метод document.createElement("b"), это все усложнит, так как я хочу, чтобы моя функция Message() получала полную стилизованную строку в качестве одного параметра.

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

Комментарии приветствуются.


javascript html dom innerhtml
person baptx    schedule 29.06.2012    source источник
comment
Свойство .innerHTML узлов элементов (тех, для которых оно имеет смысл) является задокументированной функцией HTML5.   -  person Pointy    schedule 29.06.2012
comment
@Pointy Спасибо, значит ли это, что он будет частью DOM, как был принят Microsoft XMLHttpRequest? w3.org/TR/html5/embedded-content- 0.html#dom-innerhtml   -  person baptx    schedule 29.06.2012
comment
важным моментом является то, что сегодня он поддерживается в каждом современном браузере, включая все версии IE, мобильные браузеры и т. д.   -  person Pointy    schedule 29.06.2012

Ответы (3)


arrow_upward
3
arrow_downward

Большинство дискуссий против innerHTML чрезвычайно устарели. innerHTML поддерживается почти повсеместно (с некоторыми узкими проблемами совместимости в IE), теперь является частью черновик HTML5 гораздо быстрее, чем методы DOM ( EDIT: или нет, см. комментарии) и приводит к более чистому коду.

То, что вы хотите сделать, возможно без innerHTML, но это не красиво:

var div = document.createElement("div");
var b = document.createElement("b");
b.appendChild(document.createTextNode(reference));
div.appendChild(document.createTextNode("Do you really want to delete "));
div.appendChild(b);
div.appendChild(document.createTextNode("?"));
Message(div);

И вам придется реорганизовать вашу функцию Message, чтобы она принимала DOM Node (или массив Nodes) вместо текстовой строки. В общем, я бы сказал, что оно того определенно не стоит, если только вы не ориентируетесь на IE5.

person apsillers    schedule 29.06.2012
comment
Да, это некрасиво и более сложно, это означало бы, что вам придется создавать узел div каждый раз, когда вы хотите отобразить сообщение, это глупо! Узел div создается в моей функции Message(), этот тег является частью MessageBox, так что бессмысленно не создавать div внутри этой функции :) - person baptx; 29.06.2012
comment
Кстати, я не уверен, что innerHTML быстрее, чем методы DOM с последними браузерами jsperf.com/ - person baptx; 29.06.2012
comment
Что ж, вы можете сгенерировать массив дочерних узлов и использовать Messsage, чтобы добавить их в качестве дочерних элементов в div, но тем не менее это не намного лучше. Ваш связанный тест jsperf, похоже, использует только innerHTML в качестве геттера, а не сеттера; Я хотел бы увидеть тест, использующий его для создания новых узлов (возможно, я его сделаю). - person apsillers; 29.06.2012
comment
Дополнение: похоже, что innerHTML работает медленнее в современном браузере и для записи. На тестовой странице quirksmode есть ссылки test now, которые указывают (во всяком случае, для меня), что методы DOM теперь примерно в два раза быстрее пишутся. - person apsillers; 29.06.2012

arrow_upward
0
arrow_downward

да. Вы можете прочитать успокаивающий тест Quirksmode по сравнению с другими методами.

person holygeek    schedule 29.06.2012
comment
DOM3 textContent › DOM1 nodeValue › DOM0 innerHTML в соответствии с этим тестом jsperf.com/ - person baptx; 29.06.2012
comment
Тест Quirksomde был выполнен с Firefox 3 и Chrome 5, производительность, похоже, изменилась. - person baptx; 29.06.2012

arrow_upward
0
arrow_downward

Я уверен, что .innerHTML можно использовать. Ознакомьтесь со статистикой совместимости здесь: http://www.quirksmode.org/dom/w3c_html.html, и они также подчеркивают прирост производительности при использовании этого метода по сравнению с методами DOM.

person Billy Moon    schedule 29.06.2012
comment
Спасибо, но ваш тест устарел (Firefox 3 и Chrome 5), все изменилось, и методы DOM, похоже, работают лучше, чем innerHTML jsperf.com/ - person baptx; 29.06.2012