How to add class to a javascript link - javascript

I need to add class="modal_link" to the following href
document.getElementById(el).innerHTML = "";
as it is javascript link I don't know how to add class="modal_link" to the href link so it openes in modal window.Pls help.

I have updated the answer.
You can set innerHTML and then add the class.
var a = document.getElementById(el).querySelector("a");
a.classList.add("modal_link");
Try this.

Related

Trying to learn JavaScript and use it to return only the address not the whole <a> tag

Hello and thank you in advance for any and all assistance.
I'm trying to teach myself the basics of JavaScript before I start a bootcamp. In the Prep course we are asked to return the header, first link text and first link href using document.querySelector(). The course showed us how to do the header and I was able to get the first link text. What I cannot seem to figure out is how to return JUST the address and NOT the whole tag.
Some of the things I've tried:
document.querySelector('a href')
document.querySelector('a href=')
document.querySelector('a href=""')
document.querySelector('a').innerHTML
document.querySelector('a').innerText
document.querySelector('a href').innerHTML
document.querySelector('a href').innerText
Thanks again.
John
First Understand that href is an attribute, not an element, anchor is an element that accepts href as the attribute to get this attribute value you need to first get that anchor element then get its attribute value. For example:
let anchor = document.querySelector("a");
let url = anchor.getAttribute("href");
console.log(url)
`
let anchor = document.querySelector("a");
let url = anchor.getAttribute("href");
console.log(url)
<a href='https://stackoverflow.com/' tittle='stackOverflow'Stack Overflow></a>
`
document.querySelector("a").getAttribute("href")
You can try something like this, to bring any attribute of the anchor tag
document.querySelector('a').attributes.href.value

How can i edit the href of this specific class via Javascript?

I can figure out how i can change this href link via Javascript, can you guys help me?
The link i want to change is the above:
Html Screenshot of the Link here
<div class="view-project vp-global font_rs0r6bbli">SABER MAIS</div></div><div class="section">
You can use document.querySelector('.view-project.vp-global.font_rs0r6bbli a').href to set the href value of the a tag in that class. Use browser's inspect element on that link to check the href value being changed.
var newHref = 'www.google.com';
document.querySelector('.view-project.vp-global.font_rs0r6bbli a').href = newHref;
<div class="view-project vp-global font_rs0r6bbli">SABER MAIS
You can fetch elements using the query selector..
let element = document.querySelector('.fp-tableCell .view-project.font_re0r6bbli a');
element.href="example.php";
but rather than fetching an element by its class I would recommend to use an specific id.

Get a value from an attribute and add it as another attribute?

How can I use jQuery to get a string of text from the onclick attribute and set it as the href attribute.
Here's the fiddle I'm working with: http://jsfiddle.net/MBmt5/
I want to take only TrackPackage.asp?track=95213&ship=OTHER&ShippingMethod=3 from the onclick attribute and prop it to an href attribute
So that it would end up looking like this: http://jsfiddle.net/52Nha/
Unfortunately, I have no idea how to accomplish this. Can anybody help me? Must be compatible with jQuery 1.4.2. Thanks.
Update
Of course I'd begin with:
$(document).ready(function(){
$('span.trackpackagebutton').closest('a').removeAttr('href');
});
​
Ugly but I hope this will help you.
$('a').attr('href',
$('a')[0].getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
Working demo - http://jsfiddle.net/MBmt5/5/
Note: Based on your markup structure you can use the right selector and reuse the above code.
E.g: The below code will execute this logic for all the anchors on the page which have onclick attribute which has window.open.
$('a[onclick^="window.open"]').each(function(){
$(this).attr('href',
this.getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
});
Here's one way:
http://jsfiddle.net/MBmt5/2/
http://jsfiddle.net/GaZGv/1
var $a = $('span.trackpackagebutton').closest('a');
var href = $a.attr('onclick').split('(')[1].split(',')[0].replace(/'/g, '');
$a.attr('href', href).removeAttr('onclick');
alert(href)​

make hyperlink from javascript

I want to use a hyperlink string in HTML page which I want to declare source link (URL) in my js file. Please tell me how can I call that URL from my js into html.
Thanks
There are a number of different ways to do this. You could use document.createElement() to create a link element, and then inject the element into the DOM. Or you could use the .innerHTML property of an element that you already have on the page to insert the link using text. Or you could modify the "href" attribute of an existing link on the page. All of these are possibilities. Here is one example:
Creating/Inserting DOM Nodes with DOM Methods
var link = document.createElement('a');
link.textContent = 'Link Title';
link.href = 'http://your.domain.tld/some/path';
document.getElementById('where_to_insert').appendChild(link);
Assuming you have something like this in your HTML:
<span id="where_to_insert"></span>
Creating/Inserting DOM Content with innerHTML
And another example using innerHTML (which you should generally avoid using for security reasons, but which is valid to use in cases where you completely control the HTML being injected):
var where = document.getElementById('where_to_insert');
where.innerHTML = 'Link Title';
Updating the Attributes of a Named DOM Node
Lastly, there is the method that merely updates the href attribute of an existing link:
document.getElementById('link_to_update').href = 'http://your.domain.tld/path';
... this assumes you have something like the following in your HTML:
<a id="link_to_update" href="javascript:void(0)">Link Title</a>
Try this:
var alink = document.createElement("a");
alink.href = "http://www.google.com";
alink.text = "Test Link";
document.getElementsByTagName("body")[0].appendChild(alink)
From whatever I understand, You want to update href with JS variable.
You can use Jquery to achieve it.
try $("a").attr("href", js_variable)
Refer this for more details
How to change the href for a hyperlink using jQuery
It seems like you would be able to do something like this:
Using Javascript.
var col2= document.getElementById('id_Of_Control');
col2.innerHTML="<a href='page2.html?" + params + "'>Page 2</a>";
where col2 is another container control something like div,span, or any.
Using jQuery.
Here I will recommend you to Use jQuery. So you can be more dynamic.
$("#col2").append("Page 2");
OR
$("#col2").after("Page 2");
OR
$("#col2").before("Page 2");

Changing the href attribute on checked

I'm working on a web page that contains a radio buttons group.
When one of these buttons get checked I need to change the href attribute of a link element (use different CSS file), How can I do that using Java script and html?
I tried getElementById() but the innerHtml attribute doesn't help, do you have any simple solution?
This should work:
document.getElementById('myStylesheet').href = 'http://example.com/new/href/link';
var input = document.getElementById("inputid");
if (input.checked){
var aElem = document.getElementById("aid");
aElem.href = "newurl";
}

Categories