Создадим ссылку с помощью чистого JavaScript и положим внутрь неё вырезанный элемент с сайта.
Начальный блок html:
| 1 2 3 4 5 |
<div class="display" data-link="https://ploshadka.net"> <div class="text"> <p>Лучший сайт</p> </div> </div> |
Создадим переменные с нужными нам элементами:
| 1 2 |
var paragraph = document.querySelector('.display'), text = paragraph.querySelector('.text'); |
Сохраним дата атрибут из html:
| 1 |
var text = paragraph.dataset.link; |
Создадим элемент «ссылка»:
| 1 |
var a = document.createElement('a'); |
Добавим в этот элемент значение из data атрибута:
| 1 |
var a.href = link; |
Вырезаем такой блок HTML на сайте:
| 1 2 3 |
<div class="text"> <p>Лучший сайт</p> </div> |
И сохраняем его в переменную:
| 1 |
var oldChild = paragraph.removeChild(text); |
Внутрь блока:
| 1 2 3 |
<div class="display" data-link="https://ploshadka.net"> Здесь появится ссылка </div> |
Вставляем ссылку:
| 1 |
paragraph.insertBefore(a, paragraph.firstChild); |
А внутрь этой ссылки вставляем вырезанный ранее нами элементы:
| 1 |
a.innerHTML = oldChild.outerHTML; |
В итоге получим:
| 1 2 3 4 5 6 7 |
<div class="display" data-link="https://ploshadka.net"> <a href="https://ploshadka.net"> <div class="text"> <p>Лучший сайт</p> </div> </a> </div> |
Возможные ошибки
Если в коде вместо вырезанного элемента показывается такое:
| 1 |
[object HTMLDivElement] |
Это означает, что вы не выводите содержимое объекта. Например, если использовать oldChild без outerHTML, то покажется именно такой текст.
