Есть html документ, в котором есть один div id="target"
<html>
<head>
</head>
<body>
<div id="target"></div>
</body>
Для него создан прототип testMethods
, который содержит специальный набор методов для этого div
var testMethods = {}
testMethods.__proto__ = HTMLDivElement;
target.__proto__ = testMethods;
testMethods
содержит метод hello
, который должен добавить элемент span
к объекту target
testMethods.hello = function (){
let textElement = document.createElement('span');
textElement.textContent = "Hello world!";
console.log(this); /*Выводит в консоль объект target, то что мне и надо: <div id="target"></div>*/
this.appendChild(textElement); /*Ошибка: typeError: this.appendChild is not a function. Ссылается на testMethods*/
}
Почему this в данном случае ссылается на разные объекты? Как мне правильно прикрепить потомка span
к родителю target
через функцию? Правильная ли у меня идея о том, чтобы через прототипы придать дополнительный фукнционал отдельным DOM элементам у меня на странице? Спасибо.