.innerHTML изменяет содержимое элемента (что находится между открывающим и закрывающим тегами).Ваш код пытается изменить значение атрибута элемента .Это не одно и то же.
Кроме того, важно понимать последствия использования innerHTML (и outerHTML).
- Они оба заставляют DOM перестраиваться, а затем перекрашиваться и перетекать, что очень дорого с точки зрения ресурсов.
- Их использование также удалитлюбые ранее настроенные обработчики событий.
- Они открывают дыры в безопасности вашего приложения.
- Они обычно сопровождаются гобами и гобами конкатенации строк и вложенными кавычками.
Чтобы изменить значение атрибута элемента, просто перейдите к атрибуту HTML, который вы хотите изменить, в качестве свойства объекта JavaScript или используйте метод DOM element.setAttribute(attributeName, value).
Вопрос - Как скрипт будет покрывать и заменять содержимое в
- bId id?
- Link3, у которого нет идентификатора?
а также.
Если вы хотите изменить более одного элемента, вам нужно поместить их в коллекцию или массив, а затем вы можете зациклить их.Получить их в группу можно разными способами, совсем не связанными с id s (по имени тега, по классу CSS, по положению в документе, по значениям атрибутов и т. Д.).В вашем примере, если мы хотим изменить все ссылки, которые были внутри маркеров, которые имеют target=_blank в качестве значения href, мы можем настроить таргетинг на них по положению и значению атрибута с помощью селектора CSS и .querySelectorAll() метод.Вы заметите, что в моем примере ниже, я полностью удалил атрибуты id из HTML, и код все еще работает.
Наконец, вы не должны использовать встроенные атрибуты событий HTML (onclick,и т. д.) для настройки функций обратного вызова обработки событий.Это более 25-летний метод, который копируется и вставляется каждым новым веб-разработчиком без понимания , почему его не следует использовать .Вместо этого используйте современный, основанный на стандартах код и .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>