Как я могу динамически добавить к ссылке атрибут «href» с помощью JavaScript?

95

Как я могу hrefдинамически добавить атрибут к ссылке с помощью JavaScript?

Я в основном хочу добавить hrefатрибут <a></a>динамически (т.е. когда пользователь нажимает на определенное изображение на веб-сайте).

Итак из:

<a>Link</a>

Мне нужно перейти по адресу:

<a href="somelink url">Link</a>
javascript html Павел
источник

Ответы:

166 
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
Stecb
источник
Интересно. Я не знал, что вы можете напрямую обращаться к атрибутам как к полям (сравните с моим решением ниже, используя setAttribute). Кто-нибудь знает, стандартен ли этот подход?
mgiuca
Я думаю, что в элементе DOM href - это атрибут, который вы можете установить напрямую с помощью el.href. Вместо этого setAttribute (el, attr) используется для добавления некоторых настраиваемых атрибутов к конкретному элементу DOM, поэтому в этом случае нет необходимости использовать его для установки std. attr
stecb
Но верны ли оба способа ? Не пытаюсь критиковать ответ - он вполне может быть правильным. Но в Интернете недостаточно найти что-то, что работает для вас. Он должен работать во всех браузерах, а это значит, что вам нужно соблюдать стандарты. FWIW, у меня это тоже работает (в Firefox), но мне интересно узнать, действительно ли это стандартный способ сделать это. Спецификация W3C DOM ( w3.org/TR/DOM-Level-2-Core/core.html ), похоже, не упоминает об этом.
mgiuca
6
Это интерфейсы для более легкого взаимодействия с элементами. Например, все ссылки имеют определенные методы, в HTMLLinkElementкоторых поддерживается установка определенных полей, таких как href. Вы должны посмотреть ссылку, чтобы увидеть, какой из них вы можете использовать без необходимости setAttribute. Другой пример - <table>элемент ( HTMLTableElement ), который можно использовать insertRow()для вставки новых строк без необходимости создавать <tr>и добавлять его в таблицу.
Thai
3
@mgiuca: В общем, для HTML DOM вам следует предпочесть использовать свойства, а не setAttribute()и getAttribute(), которые не работают в IE и не всегда делают то, что вы ожидаете. См. Stackoverflow.com/questions/4456231/…
Тим Даун
25

Я предполагаю, что вы знаете, как получить объект DOM для <a>элемента (используя document.getElementByIdили какой-либо другой метод).

Чтобы добавить любой атрибут, просто используйте метод setAttribute для объекта DOM:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");
mgiuca
источник
приятель, setattribute довольно нестандартен для изменения атрибутов. Чтобы получить доступ или изменить текущие значения, вы должны использовать свойства. Например, используйте elt.value вместо elt.setAttribute ('значение', val). developer.mozilla.org/en/DOM/element.setAttribute#Notes
naveen
@naveen Здесь написано «особенно в XUL», что, по-видимому, не то, что есть. Я не уверен, к каким еще значениям он относится («определенные атрибуты» очень расплывчато), но setAttributeявно является стандартом ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ), и W3C не определяет никаких атрибутов, для которых он не работает. И наоборот, я могу гарантировать, что использование свойства не удастся для определенных имен атрибутов. Такие как tagName, и setAttribute- это уже поля / методы интерфейса Element. Я не вижу нигде в документе W3C, где упоминаются свойства атрибутов.
mgiuca
@mgiuca: Похоже, вы нашли соответствующую спецификацию после публикации последнего комментария. Я не понимаю вашего мнения о сбое свойств, а затем упоминании tagName. Вы говорите о настраиваемых атрибутах?
Tim Down
Я имею в виду, что DOM (даже если он реализован в браузере) является общей спецификацией для работы с деревьями XML в целом, а не только с HTML. При работе с произвольными XML-элементами единственный способ надежно получить и установить атрибуты - это getAttributeи setAttribute; "tagName"является примером атрибута, который не может работать как свойство. Только при работе с HTML и для определенных атрибутов, определенных в спецификации DOM HTML, вы можете использовать свойства для чтения и назначения атрибутов.
mgiuca
Я, наверное, неправильно понял, но это все еще сбивает с толку. tagName является свойством Elementобъектов в JavaScript как в HTML, так и в XML DOM, и вы не можете получить имя тега элемента через getAttribute("tagName")(за исключением IE, чья реализация getAttribute()и setAttribute()нарушена), что кажется прямо противоположным тому, что вы говорите.
Тим Даун
3

Сначала попробуйте перейти <a>Link</a>на <span id=test><a>Link</a></span>.

Затем добавьте что-то подобное в вызываемую функцию javascript:

var abc = 'somelink';
document.getElementById('test').innerHTML = '<a href="' + abc + '">Link</a>';

Таким образом, ссылка будет выглядеть так:

<a href="somelink">Link</a>
Рахул Судха
источник
Здравствуй. Добро пожаловать в Stackoverflow. Вопрос OP кажется о том, как добавить hrefк существующему a тегу ( я в основном хочу добавить атрибут href в <a> </a> динамически ). Тем не менее, этот ответ , кажется, объяснить , как создать в aтег с href.
Мойше Липскер
1 
document.getElementById('link-id').href = "new-href";

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

noɥʇʎԀʎzɐɹƆ
источник