We Keep Coding

Set attribute to a child element

I am trying to set an id attribute "gradient" to child element of the main one, which is grabbed by its id of "bg-gradient" , with below code, seems simple but its not working. Code is below, and the id "bg-gradient" is the only one in the document. It should set an id of "gradient" to the next div class "bg-gradient" when click the edit button but doesn't.
editSwatch() {
let elem = document.getElementById('#bg-gradient');
elem.childElement.setAttribute("id","gradient");
}
Any tips welcome.
Thanks

There is no childElement property for the DOM element instead use firstElementChild property to get the first child. In addition to that remove # from the argument since getElementById requires an id value and not a CSS selector.
editSwatch() {
let elem = document.getElementById('bg-gradient');
elem.firstElementChild.setAttribute("id", "gradient");
}
Or alternately you can use querySelector method to get the element.
editSwatch() {
document.querySelector('#bg-gradient > .bg-gradient').setAttribute("id", "gradient");
}

change
let elem = document.getElementById('#bg-gradient'); to
let elem = document.getElementById('bg-gradient');
and change
elem.childElement.setAttribute("id","gradient"); to
elem.firstElementChild.setAttribute("id","gradient");
dont put #. It is used by jquery like $("#bg-gradient")

How to read in an id element that has an href

I am trying to remove the content referenced by the following id:
<...id href="https://xyz'...>
My code:
var right = document.getElementById('https://xyz');
var parent = right.parentNode;
parent.removeChild(right);
The problem is when I reference the name of the id, it comes back as null. I tried document.getElementById('https://xyz').href, yet still null. Any suggestions?
Thanks.

You probably want to use document.querySelector:
var right = document.querySelector('[href="https://xyz"]');
or if you need the n-th match, document.querySelectorAll:
var right = document.querySelectorAll('[href="https://xyz"]')[n];

getElementById as the name suggests, selects an element by id so you have to define an id on your element: id="some_id" and then in JavaScript document.getElementById('some_id')

That's because you did not assign any ID to that tag. So document.getElementById('https://xyz') won't give you anything because there is no tag with this ID.
You have to assign an ID like this:
<...id="ID_of_href" href="https://xyz'...>
Then you can get it with:
document.getElementById('ID_of_href')

First of all we got to understand what is the html id attribute.
Definition and Usage
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet,
and by JavaScript (via the HTML DOM) to manipulate the element with
the specific id.
According to this link: https://www.w3schools.com/tags/att_id.asp.
W3schools is a great web site for you to learn web development.
How to achieve your purpose:
const barElement = document.getElementById('bar');//Getting the element which id is bar.
console.log(barElement);
const fooElement = barElement.parentNode;//Getting bars parent.
console.log(fooElement);
<div id="foo">
<a id="bar" href="#"></a>
</div>

Append new path in all the a href URL

I have seen the post How to update (append to) an href in jquery? , but it doesn't seem like the answer can help at my case.
I am currently using a plugin(easytab) to create a few different tab and every tab contains a tag like <a id="tabopen" href="www.text.com/custom/questions/ask/">
<a id="tabopen" href="www.text.com/default/questions/ask/">
and for some reason I have a button which append some extra path to all the href in order to redirect user to the right place.
I have tried to use
$("a#tab1").each(function() {
var _href = $(this).attr("href");
$(this).attr("href", _href + 'startDate=20160121?endDate=20160212');
});
but instead append the 'startDate=20160121?endDate=20160212' it replace everything to www.text.com/custom/questions/ask/startDate=20160121?endDate=20160212 , which is not right, how should i fix it?
Update 1:
I am sorry that i have provide wrong description at, the ids are actually the same in the plugin.
<a id="tabopen" href="www.text.com/custom/questions/ask/">
<a id="tabopen" href="www.text.com/default/questions/ask/">

$("a#tab1") selects a single <a> element having ID as tab1. To change the href attribute of a single element there is no need of each.
var href = $('a#tab1').attr('href') + '?startDate=20160121&endDate=20160212';
$('a#tab1').attr('href', href);
If having multiple elements with same ID, ID should be unique.
To select all the elements whose ID starts with tab, you can use attribute start with selector. I'll suggest to use a unique class on them.
To change the href attribute value of all the matched elements .attr(attributeName, function) with callback function can be used.
$('a[id^="tab"]').attr('href', function(i, oldHref) {
return oldHref + '?startDate=20160121&endDate=20160212';
});
As said by #charlietfl in the comment, the querystring format should be as follow
'?startDate=20160121&endDate=20160212'
^ ^
Update:
Saying again, ID should be unique., you can use class instead of ID for similar purpose elements.
Change the markup to use class
<a class="tabopen" href="www.text.com/custom/questions/ask/">
<a class="tabopen" href="www.text.com/default/questions/ask/">
And then use the selector
$('.tabopen').something...
BAD PRACTICE:
If you can't change the markup(auto-generated markup by some plugin), you can use attribute value selector to select all elements having same ID
$('a[id="tabopen"]').something...

Find a href and match a div

I have this variabele.
var href = $(this).attr('href');
I get the href from a link. Now i have a lot of display none div's on the page. I want to check if the div have the same id. The id that is in the href. Then the div must be show.
How can i make that check?

Concatenate your href variable with a number sign to produce a jQuery ID Selector, and call .show() on your returned object:
$('#' + href).show();

From my understanding you have a bunch of hidden DIVs that you want to show based on the anchor ID. the code below should work however you should not have more than one ID on a page no matter what element it is assigned to. Best practice is to use classes. It would work the same.
// create a click function for the anchor tag
$('a').click(function(){
//grab the id of the selected anchor tag if if has one if not it will be undefined.
// $(this) represents the current anchor tag in the scope of the click function.
var href = $(this).attr('id');
// look for any other element with the same id and set it to show.
$('#'+href).show();
// cancel the anchor page action.
return false;
});

that's True when using JQuery Selector you can Use Exact
$('#' + href + '').show();

how to set href value on all elements with a given ID?

I have several anchor tags on a page with the same id of 'hrefCompare'. I need to dynamically set the value of the href attribute on ALL of these a tags.
I am currently trying to do this:
$("#hrefCompare").attr("href", "foobar.com");
However, this only sets the very first anchor tag with that ID. there's 7 more on this page with the same id of 'hrefCompare'. How can I set all of the href values with that ID?

id must be unique, in this case I advice you to use class, which should work flawlessly:
$(".hrefCompare").attr("href", "foobar.com");
<a href="#" class="hrefCompare">a</b>
<a href="#" class="hrefCompare">b</b>

You cannot do this with IDs (they are unique), try using the same css class for all the elements you want (doesn't matter if this class does not exist).
HTML:
text1
text2
Please avoid using # in href attributes (if you care about behaviors). Read this to know why: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
Then:
For older jQuery versions use .attr(..) otherwise use .prop(..)
$('.hrefCompare').prop('href', 'http://www.foobar.com');
Finally:
1) To assign the same url to every href attribute of an anchor element, do the following:
$('.hrefCompare').map(function(i, v){ return $(this).prop('href', 'http://www.foobar.com'); });
2) To assign different urls to every href attributes of the anchors according to their possitions (like an array - starting from zero -), do the following:
$('.hrefCompare').map(function(i, v){
if(i === 0) url = 'http://www.stackoverflow.com';
if(i === 1) url = 'http://www.foobar.com';
return $(this).prop('href', url);
});
Using this way...
first anchor, position 0: (text1 => if clicked => will redirect to stackoverflow)
second anchor, position 1: (text2 => if clicked => will redirect to foobar)

Ids must be unique in a DOM. try to use a class name and use jquery each function
$('a').each(function(k,v){
$(v).attr('href','mylink');
});