расширение Element.prototype, проблема с якорем

Question

Рассмотрим следующее:

JS

Element.prototype.text = function(str) {
  this.textContent = str;
  return this;
}

let div = document.createElement('div').text('div text'); //Works fine
let a = document.createElement('a').text('anchor text'); //Blows up
document.body.append(div, a);

Функция, которую я добавил в прототип, прекрасно работает на div или любом другом элементе, который я пробовал, кроме элемента привязки, и когда я печатаю цепочку прототипа для элемента привязки, я обнаруживаю, что в ней есть элемент Element, как и ожидалось.

Есть идеи, почему это не работает с элементом Anchor в каждом браузере, который я пробовал?

Answer 1

Это взрывается, потому что у тега привязки нет текстового свойства / поля, поэтому он не может его установить. Сначала создайте элемент, затем создайте текст и прикрепите его к ссылке.

var anchortext = document.createTextNode("your text here");
a.appendChild(anchortext);

Answer 2

Проблема в том, что:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement#Properties

HTMLAnchorElement.text

Является ли DOMString синонимом свойства Node.textContent.

Итак, HTMLAnchorElement.prototype.text - это , слежка ваш заказ Element.prototype.text.

Другая проблема заключается в том, что HTMLAnchorElement.prototype.text является установщиком - вы не можете просто переназначить его, например,

HTMLAnchorElement.prototype.text = function(str){
   this.textContent = str
   return this
}

, потому что это вызовет установщик, в результате чего Illegal Invocation. Сначала вам придется удалить свойство text в прототипе, а , а затем присвоить HTMLAnchorElement.prototype:

Element.prototype.text = function(str){
   this.textContent = str
   return this
}
delete HTMLAnchorElement.prototype.text;
HTMLAnchorElement.prototype.text = function(str){
  this.textContent = str
  return this
}

let div = document.createElement('div').text('div text')
let a = document.createElement('a').text('anchor text')
document.body.append(div,a)