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

Admin 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, то покажется именно такой текст.

Метки:

Читайте также

На сайте отсутствует реклама! Значете почему?

Помогать людям - моё хобби. А навыки разработчика позволяют не парится нулевой монетизизацией этого сайта. Хотя...

Если вам помогла информация, то даже от доната в 40 рублей мне будет приятно. Докину немного, куплю латте в макдаке, вспомню за чей счет банкет и карма вам зачтется!

Но и просто оставленный комментарий благодарности ниже принесет мне улыбку радости :)

А если захочется написать всякие гадости с переходом на личности, да тоже не стесняйтесь, но обычно я отправляю такое в спам. Люблю, когда дома чисто.

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

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