Ванильный JavaScript заменяет элемент - PullRequest
Новая
       11

Ванильный JavaScript заменяет элемент

0 голосов
/ 28 августа 2018

Я огляделся и, похоже, не могу найти решение для прямой замены элемента строкой HTML с использованием ванильного JavaScript (не jQuery).

Я храню кучу svg в общедоступном каталоге, и я хочу иметь возможность включать их в мои файлы с помощью тега image <img src="path/to/svgs/example.svg">. Тем не менее, это имеет свои недостатки, так как они не могут быть окрашены / стилизованы, когда они вытащены в виде изображения (насколько мне известно).

Я обнаружил этот пример Изображение jQuery для SVG , но очевидно, что здесь используется функция replaceWith jQuery. Я пытаюсь повторить функциональность, но борюсь с вышеупомянутой функцией. Все примеры, которые я нашел, в итоге создают родительский элемент div и добавляют новый HTML к этому вновь созданному элементу.

TL; DR: можно ли напрямую заменить элемент (IMG на SVG) с помощью обычного JavaScript без создания родительских узлов?

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Предполагается, что вы уже загрузили SVG в строку (через XmlHttpRequest, fetch и т. Д.). Затем вы можете разобрать его, используя DOMParser. 

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingSVGSource, "image/svg+xml");

См .: Разобрать SVG и добавить его в элемент svg

Затем вы можете заменить исходный <img>, используя метод, подобный insertBefore / removeChild, который предлагает Senad.

0 голосов
/ 28 августа 2018

jQuery также использует JavaScript за методом replaceWith, поэтому, если вы хотите заменить один элемент другим, вам необходимо выполнить следующие шаги:

  1. Создать новый элемент
  2. Добавьте его после / перед элементом, который необходимо заменить
  3. Затем удалите оригинальный элемент

1012 * например * Если у нас есть список HTML 

<ul>
        <li>before</li>
        <li id="my-element">My element</li>
        <li>after</li>
    </ul>

и мы хотим заменить элемент списка с идентификатором «my-element» новым элементом, тогда нам нужно сделать next : 

//get reference to element that we want to replace
var elementToReplace = document.getElementById('my-element');
//create new element which will replace existing element
var newLi = document.createElement('li');
//just setting html in it
newLi.innerHTML = 'Just added';
//getting parent element reference and executing method "insertBefore" passing our new element and reference of element that we want to replace
elementToReplace.parentNode.insertBefore(newLi, elementToReplace.nextSibling);
//then we remove original element
elementToReplace.parentNode.removeChild(elementToReplace);

Надеюсь, это поможет.

...