Как создать ссылку с помощью JavaScript

Создадим ссылку с помощью чистого JavaScript и положим внутрь неё вырезанный элемент с сайта.

Начальный блок html:

<div class="display" data-link="https://ploshadka.net">
    <div class="text">
        <p>Лучший сайт</p>
    </div>
</div>

Создадим переменные с нужными нам элементами:

var paragraph = document.querySelector('.display'),
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>

И сохраняем его в переменную:

var oldChild = paragraph.removeChild(text);

Внутрь блока:

<div class="display" data-link="https://ploshadka.net">
Здесь появится ссылка
</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>

Возможные ошибки

Если в коде вместо вырезанного элемента показывается такое:

[object HTMLDivElement]

Это означает, что вы не выводите содержимое объекта. Например, если использовать oldChild без outerHTML, то покажется именно такой текст.

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "Как создать ссылку с помощью JavaScript"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>