Я создаю аудио-сайт.
Он использует пользовательские компоненты (для треклистов, треков, источников треков, проигрывателя ..., но я застрял на чем-то.
Когда пользователь нажимает на дорожку, HTML-код дорожки в конечном итоге необходимо обновить - это позволяет мне, в частности, запрашивать в базе данных информацию об этой дорожке (например, источники дорожки), которая будет слишком длинной для загрузки винициализация.
Таким образом, Мне нужно заменить свой узел трека на обновленный HTML .
Но я нахожу только документацию о замене содержимого узла ( .innerHTML ), а не сам узел. Это не работает для меня, поскольку Мне нужно получить атрибуты нового узла .
Не знаюЯ не хочу удалять старый узел и добавлять новый в том же месте, потому что мне нужно сохранить ссылку на первый узел.
Чего я хочу достичь (упрощенно)
JS
<?php
class myCustomEl extends HTMLElement{
constructor() {
super(); //required to be first
}
connectedCallback(){
this.render();
}
disconnectedCallback(){
}
attributeChangedCallback(attrName, oldVal, newVal){
}
adoptedCallback(){
}
static get observedAttributes() {
}
///
///
render(){
}
reload(){
var self = this;
var success = $.Deferred();
/*
Here we would make an ajax request to return the new content
*/
var newContent = '<my-custom expires="XXXX">New Content</my-custom>';
success.resolve();
return success.promise();
}
}
$( document ).ready(function() {
$('my-custom').on('click', '.wpsstm-source-title', function(e) {
var mynode = this;
mynode.reload().then(
function(success_msg){
console.log("RELOADED!");
console.log(mynode); //here I would like to be able to get mynode with its updated content
},
function(error_msg){
console.log(error_msg);
}
);
});
});
window.customElements.define('my-custom', myCustomEl);
HTML
<my-custom expires="XXXX">Old Content</my-custom>
Что я на самом деле делаю
(потому что я не могу заставить его работать)
- копируем новый узел .innerHTML в старый узел .innerHTML ,
- удалить все атрибуты старого узла,
- скопировать все атрибуты нового узла на старый узел.
Кажется, что это работает, но я думаю, что это довольно хакерски, и мне было интересно, как я могу добиться этого по-другому.
function swapNode(oldNode,newHTML){
//create new node from HTML
var template = document.createElement('template');
newHTML = newHTML.trim(); // Never return a text node of whitespace as the result
template.innerHTML = newHTML;
var newNode = template.content.firstChild;
//check both nodes have the same tag
if (oldNode.tagName !== newNode.tagName){
console.log("wpsstmSwapNode - tags do not match, abord.");
return false;
}
//remove all old attributes
while(oldNode.attributes.length > 0){
oldNode.removeAttribute(oldNode.attributes[0].name);
}
//add new attributes
let attr;
let attributes = Array.prototype.slice.call(newNode.attributes);
while(attr = attributes.pop()) {
oldNode.setAttribute(attr.nodeName, attr.nodeValue);
}
//switch HTML
oldNode.innerHTML = newNode.innerHTML;
return true;
}
Я тоже пробовал это
var parent = self.parentNode;
var newContent = '<my-custom>NEWCONTENT</my-custom>';
var newNode = $(newContent).get(0);
var oldNode = parent.removeChild(self);
parent.appendChild(newNode);
newNode.appendChild(oldNode);
Спасибо!