是否可以使用javascript更新节点的OUTER html？

Question

我正在建立一个音频网站。

它使用自定义组件（用于轨道列表，轨道，轨道源，播放器......）但我坚持使用某些东西。

当用户点击一个轨道时，最终需要刷新轨道HTML - 这使我能够在数据库中查询该轨道上的信息（例如轨道源），这些信息在初始化时加载太长。

因此，我需要用更新的HTML替换我的track节点。

但我只找到有关替换节点内容（.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，
• 删除旧节点的所有属性，
• 将新节点的所有属性复制到旧节点。

它似乎工作，但我认为它是相当hackish，并想知道如何以不同的方式实现这一目标。

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);

谢谢 ！

Answer 1

从父节点分离，将新的子节点添加到父节点，然后将您作为子节点分离的节点添加到新节点。