Изменение html элемента с помощью JS
Всё тот же код из задания про удаление элемента, но теперь требуется заменить элемент с плохой картинкой спаном, в котором будет текст Now here is a ‘span’ element. внутри этого самого спана.
<!DOCTYPE html>
<head>
</head>
<body>
<p style="color: navy"> There's only picture here...
<br>
<img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
</p>
<br>
<p> This one cannot be displayed. We have to replace it.
<img alt="bad picture">
</p>
<script type="text/javascript">
var pElement=document.getElementsByTagName('p')[1];
var imgElement=document.getElementsByTagName('img')[1];
var sElement = document.createElement('span');
var txt = "Now here is a ‘span’ element.";
sElement.innerHTML = txt;
pElement.replaceChild(sElement,imgElement);
</script>
</body>
</html>
Вот что получилось, в HTML текст отображается, но значение спана все ещё не соответствует тексту, даже не знаю как это поправить |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<p style="color: navy"> There's only picture here...
<br>
<img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
</p>
<br>
<p> This one cannot be displayed. We have to replace it.
<img alt="bad picture">
</p>
<script type="text/javascript">
var imgElement=document.getElementsByTagName('img')[1];
var pElement=imgElement.parentNode;
var sElement = document.createElement('span');
sElement.innerHTML = "Now here is a ‘span’ element.";
pElement.removeChild(sElement,imgElement);
pElement.appendChild(sElement);
</script>
</body>
</html>
|
Цитата:
pElement.appendChild(sElement); pElement.replaceChild(sElement,imgElement); Т.е. на момент выполнения replaceChild() оба дитя должны существовать в родителе... ;) |
ksa, 🌚
crabkilla, вот правильное решение... Вариант №1 Одноразовое замещение ломанных картинок после загрузки...
<!DOCTYPE html>
<head></head>
<body>
<p style="color: navy"> There's only picture here...
<br>
<img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
</p>
<br>
<p id="pic"> This one cannot be displayed. We have to delete it.
<img alt="bad picture">
</p>
<script>
addEventListener("load", function() {
for(const image of document.images) {
if(image.naturalWidth === 0) {
const node = document.createElement("span");
node.textContent = "Now here is a ❄️.";
image.replaceWith(node);
}
}
});
</script>
</body>
</html>
Вариант №2 Живое замещение ломанных картинок ...
<!DOCTYPE html>
<head></head>
<body>
<script>
const observer = new MutationObserver(mutationRecords => {
for(const mutationRecord of mutationRecords) {
if(mutationRecord.type === "childList") {
for(const node of mutationRecord.addedNodes) {
if(node instanceof HTMLImageElement) {
if(!node.hasAttribute("src"))
replaceBrokenImage(node);
else
node.addEventListener("error", ()=> replaceBrokenImage(node));
}
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
function replaceBrokenImage(image) {
const node = document.createElement("span");
node.textContent = "Now here is a ❄️.";
image.replaceWith(node);
}
</script>
<p style="color: navy"> There's only picture here...
<br>
<img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
</p>
<br>
<p id="pic"> This one cannot be displayed. We have to delete it.
<img alt="bad picture">
</p>
</body>
</html>
|
Malleys,
создание элементов в цикле дорогая операция для этого есть клонирование, фрагмент, insertAdjacentHTML ... кроме того сам подход замены битых картинок средствами js напоминает (........) вы правильно прочитали для этого достаточно пару строк в nginx или htaсcess, обработать сервером |
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
|
https://learn.javascript.ru/multi-insert
читаем учебник |
img.onload = function() {
// the image is ready
};
img.onerror = function() {
// the image has failed
};
Это для Цитата:
|
Цитата:
Однако, всё это так и так это знаю! И я обычно не использую innerHTML+=, insertAdjacentHTML поскольку это ломает объекты или является не ООП подходом! Я так понимаю, вы хотели доказать какую-то, как вам кажется, мою ошибочность... однако статья, на которую вы дали ссылку, как раз таки подтверждает все мои взгляды! Вот...
Я прочитал статью и запустил тесты, не знаю, что именно вы хотели мне сказать... Посмотрел с телефона (результаты такие же, т. е. вставка через фрагмент незначительно медленней) Т. е. разумная точка зрения такая, что можно использовать оба варианта! 🎉 На компьютере был Chrome 75 и телефоне Chrome 74! Цитата:
Цитата:
Это способ подходит только если вы работаете с конкретным изображением... А если вы вставляете HTML-код в DOM и в коде есть картинки, то правильней использовать именно Service Worker. И Service Worker предоставляет централизованный способ обработки запрашиваемых ресурсов, будь то шрифты, картинки интерфейса, данные приложения, шаблоны, всё, что нужно для работы приложения. 😎 |
1. не стоит перекручивать задачи
2. в автономных приложениях битую картинку должен видеть разработчик и править 3. единственно где проверяют картинки это контент редактируемый пользователями на сервере. сервера настраивают всегда. Не стоит считать конфигурацию сервера вредом. Это наоборот полезно и нужно. 4. когда вы утверждаете в правильности вашего решения, вы думаете что можете ошибаться? Зачем эта замена (надо заменять сервером). И если уж так горит js то по событию image onerror заменять src на base64 одно пиксельной картинкой onload и onerror для image здесь отлично работают 5. исходя из ваших убеждений разработчики языка написали много ненужных вещей clone, onerror ... ох уж эти разработчики |
| Часовой пояс GMT +3, время: 17:04. |