.innerHTML alters the content of an element (what's between the opening and closing tags). Your code attempts to alter the value of an element's attribute. These are not the same thing.
Also, it's important to understand the implications of using innerHTML (and outerHTML).
- They both cause the DOM to have to be re-built and then re-painted
and re-flowed which is very expensive in terms of resources.
- Their use will also remove any previously set up event handlers.
- They open security holes in your application.
- They are usually accompanied by gobs and gobs of string
concatenations and nested quotes.
To change the value of an element's attribute, just access the HTML attribute you want to modify as a property of the JavaScript object or use the element.setAttribute(attributeName, value) DOM method.
Question - How would the script cover and replace contents in
- bId id?
- Link3, which has no id?
as well.
When you want to alter more than one element, you need to get them into a collection or array and then you can loop over them. Getting them into a group can be done in many different ways that doesn't have to do with ids at all (by tag name, by CSS class, by position in the document, by attribute values, etc.). In your example, if we wanted to modify all the links that were inside of bullets that have target=_blank as their href value, we could target them by position and attribute value with a CSS selector and the .querySelectorAll() method. You'll notice in my example below, I've removed the id attributes completely from the HTML and the code still works.
Lastly, you should not be using inline HTML event attributes (onclick, etc.) to configure event handling callback functions. That is a 25+ year old technique that gets copied and pasted by every new web developer without an understanding of why it shouldn't be used. Instead, use modern, standards-based code and the .addEventListener() DOM API.
// Get the elements you wish to work on into an Array
// Here, we're selecting <a> elements that have an href attribute with a value of _blank
// that are direct children of <li> elements:
var elementsToChange = Array.prototype.slice.call(document.querySelectorAll("li > a[target='_blank']"));
// We only need to worry about what's going to change
var newRel = 'noopener noreferrer'
// This will be the click event callback function
function doAlert(){
alert('Hello World!');
}
// Loop over the array
elementsToChange.forEach(function(element){
// Just access the HTML attribute you want to modify as a property of the JavaScript object
element.rel = newRel;
// Or, use the DOM API
element.setAttribute("rel", newRel);
// Either way the DOM API should always be used to set up event handlers
element.addEventListener("click", doAlert);
});
<ul>
<li><a href="https://www.w3schools.com" target="_blank">I will be modified by the code</a></li>
<li><a href="https://www.w3schools.com">I WON'T be modified by the code!</a></li>
<li><a href="https://www.w3schools.com" target="_blank">I will be modified by the code</a></li>
</ul>
