jsをhtmlに変換

Question

私が持っているテンプレートからコンポーネントを抽出したい、それらのコンポーネントはjavacript & svgで生成されています。 純粋なhtmlに変換する方法はありますか？ 私はそれらを簡単に操作できます。 私はこれらのコンポーネントだけを別のテンプレートで使用することを試みています。 しかし、すべてのコードをhtmlに変換するまで、私はそれを行うことはできません。 また、私が気づいていない別の方法があります。 ありがとうございます。

この1つは、これは、JSファイルの一部である

<script> 
    var grid = document.querySelector("#grid"); 

    var editor = Ned.create("#svg"); 
    editor.snapping = 10; 
    //editor.singleInputs = true; 
    //editor.singleOutputs = true; 

    // only enable middle mouse button dragging 
    editor.svg.addEventListener("mousedown", (e) => { 
     if (e.button !== 1) e.stopImmediatePropagation(); 
    }); 

    editor.panZoom = svgPanZoom(editor.svg, { 
     viewportSelector: ".svg-pan-zoom_viewport", 
     panEnabled: true, 
     controlIconsEnabled: true, 
     zoomEnabled: true, 
     dblClickZoomEnabled: false, 
     mouseWheelZoomEnabled: true, 
     preventMouseEventsDefault: false, 
     zoomScaleSensitivity: 0.2, 
     minZoom: 0.5, 
     maxZoom: 2, 
     fit: false, 
     contain: false, 
     center: false, 
     refreshRate: "auto", 
     onPan: function(newPan) { 
      var zoom = this.getZoom(); 
      grid.setAttribute("x", -newPan.x/zoom); 
      grid.setAttribute("y", -newPan.y/zoom); 
     } 
    }); 

    editor.screenToWorld = function(pos) { 
     var rect = this.svg.getBoundingClientRect(); 
     var pan = this.panZoom.getPan(); 
     var zoom = this.panZoom.getZoom(); 

     return { 
      x: (((pos.x - rect.left) - pan.x)/zoom), 
      y: (((pos.y - rect.top) - pan.y)/zoom) 
     }; 
    }; 

    window.addEventListener("resize", (e) => { 
     editor.panZoom.resize(); 
    }, true); 



    // after setup create nodes  
    var n1 = editor.createNode("Test node"); 
    n1.position = { x: 400, y: 280}; 
    n1.size = { width: 180, height: 90 }; 

    var n1i1 = n1.addInput(""); 
    var n1i2 = n1.addInput("Input B"); 

    var n1o1 = n1.addOutput("Output A"); 
    var n1o2 = n1.addOutput("Output B"); 

    var n2 = editor.createNode("Start"); 
    n2.position = { x: 100, y: 150}; 
    n2.size = { width: 100, height: 60 }; 
    var n2o1 = n2.addOutput("Output"); 

    n2o1.connectTo(n1i2); 

    var n3 = editor.createNode("Other test"); 
    n3.position = { x: 200, y: 10}; 
    n3.size = { width: 180, height: 60 }; 
    var n3i1 = n3.addInput("Input B"); 
    var n3o1 = n3.addOutput("Output"); 

    </script> 

ファイルJSのほか、HTMLファイルに含まれています：

init(ned, sTitle) { 
    this.editor = ned; 
    this.inputs = []; 
    this.outputs = []; 

    // ****************** root ****************** 
    this.eRoot = document.createElementNS(ned.svg.ns, "svg"); 
    this.eRoot.setAttribute("class", "NodeContainer"); 
    var abcElements = document.querySelectorAll('.NodeContainer'); 

    // Set their ids 
    for (var i = 0; i < abcElements.length; i++){ 
     abcElements[i].id = i; 

    } 

    this.eRoot.setAttribute("overflow", "visible"); 
    this.editor.nodegroup.appendChild(this.eRoot); 

    // ****************** background ****************** 
    this.eBack = document.createElementNS(ned.svg.ns, "rect"); 
    this.eBack.setAttribute("class", "Background"); 
    this.eRoot.appendChild(this.eBack); 

    // ****************** header ****************** 
    this.eHeader = document.createElementNS(ned.svg.ns, "g"); 
    this.eHeader.setAttribute("class", "Header"); 
    this.eRoot.appendChild(this.eHeader); 

    this.eHeaderBack = document.createElementNS(ned.svg.ns, "rect"); 
    this.eHeader.appendChild(this.eHeaderBack); 

    this.eHeaderText = document.createElementNS(ned.svg.ns, "text"); 
    this.eHeaderText.appendChild(document.createTextNode(sTitle)); 
    this.eHeaderText.setAttribute("x", "50%"); 
    this.eHeader.appendChild(this.eHeaderText); 

    // ****************** inputs and outputs ****************** 
    this.eInputs = document.createElementNS(ned.svg.ns, "svg"); 
    this.eInputs.setAttribute("class", "Inputs"); 
    this.eInputs.setAttribute("overflow", "visible"); 
    this.eInputs.setAttribute("x", "0%"); 
    this.eRoot.appendChild(this.eInputs); 

    this.eOutputs = document.createElementNS(ned.svg.ns, "svg"); 
    this.eOutputs.setAttribute("class", "Outputs"); 
    this.eOutputs.setAttribute("overflow", "visible"); 
    this.eOutputs.setAttribute("x", "100%"); 
    this.eRoot.appendChild(this.eOutputs); 

    // ****************** foreign object ****************** 
    this.eForeign = document.createElementNS(ned.svg.ns, "foreignObject"); 
    this.eRoot.appendChild(this.eForeign); 

    // selection events 
    this.eRoot.addEventListener("click", (e) => { this.onClicked(e); }); 
    this.eHeader.addEventListener("mousedown", (e) => { this.beginNodeDrag (e); }); 
}, 

Answer 1

ちょうどブラウザでJavaScriptを実行し、一度自分のHTMLコードが生成された場合は、F12（firefox/chrome上）を押すか、ページを右クリックして「ソースを表示」をクリックします（タブ名はブラウザによって異なる場合があります）。次に、作成したコンポーネントをエディタにコピー/ペーストするだけです。

「純粋なHTMLに変換する」とはどういう意味ですか？このJSスクリプトの目的がHTMLを生成することであれば、基本的には純粋なHTMLに変換します。