Элемент не отображается в элементе inspect при использовании document.write - PullRequest
Новая
       43

Элемент не отображается в элементе inspect при использовании document.write

3 голосов
/ 04 мая 2019

Я написал следующий код JS: 

<script>
function myFunction() {
  document.write("<img src=x>")
}
myFunction();
</script>

, в то время как моя функция работает нормально и добавляет новый тег img на страницу всякий раз, когда я использую Ctrl + Shift + I в Chrome, затем Ctrl + F, затем я набираю<img src=x> и я получаю 0 of 0 found.Как это исправить?

1 Ответ

2 голосов
/ 04 мая 2019

Из вашего комментария:

Ctrl + Shift + I в Chrome, затем Ctrl + F, затем я набираю, и я получаю 0 из 0 найдено

Нет необходимости делать это. Просто щелкните правой кнопкой мыши по изображению и нажмите «Проверить». Chrome перенесет вас прямо на панель «Элементы».

Повторный поиск на панели «Элементы»:

На панели «Элементы» отображается не тот HTML-код, который вы написали, а DOM, представленный в виде канонического HTML-кода. Так, например, атрибут src будет в кавычках.

Но , поле поиска на панели «Элементы» не выполняет поиск HTML , оно ищет DOM. Таким образом, ввод простого текста будет соответствовать тексту в текстовых узлах, тексту в атрибутах, именам атрибутов, именам тегов и т. Д., Но не точному HTML. Поэтому, если вы ищете URL изображения, он найдет его, но не найдет, если вы ищете <img src=. Это не имеет никакого отношения к добавлению через document.write, просто работает панель элементов Chrome.

Вы можете найти элемент, набрав XPath или селектор CSS, например, img[src=x] найдет его. Вот пример (я использовал ваш Gravatar вместо x):

Example using search in elements panel

Там вы можете видеть, что селектор img[src*=gravatar] нашел изображение, потому что этот селектор (с помощью селектора атрибута "содержит" *=) соответствует элементу.

...