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