用HTML包裝JavaScript元素

Question

以下代碼復制給定一個css類的所有元素，這很好，它確實呈現了元素列表...現在，我想將這些結果包裝在HTML內容中，如何實現呢？

setTimeout(function() {
  var element = document.getElementById("unique_ID");
  element.innerHTML = "";
  Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {
    var storednode = element.appendChild(e.cloneNode(true));

  });
}, 300);

如何將每個storagenode的 HTML內容包裝起來 ？ 我已經能夠應用這些類： storednode.className += " another-class"; ，但是如何將結果包裝在我想要的任何HTML中？ 那可能嗎？

感謝您的時間。

編輯：

腳本就是這樣做的。

 setTimeout(function() { var element = document.getElementById("unique_ID"); element.innerHTML = ""; Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) { element.appendChild(e.cloneNode(true)); }); }, 300); 

 #unique_ID { border: 1px solid blue; } 

 <div id="unique_ID"></div> <div class="a_random_class">a</div> <div class="a_random_class">b</div> <div class="a_random_class">c</div> <div class="a_random_class">d</div> <div class="a_random_class">e</div> <div class="a_random_class">f</div> 

我需要的是每個結果（例如<div class="a_random_class">f</div>都可以包裝在我想要的任何HTML代碼中，以獲得類似<div id="another-div" class="a-class" style="maybe:styles"><li><div class="a_random_class">f</div></li></div>當然，這是一個示例，但我想知道是否可能...不僅復制類元素，而且在它們上附加一些HTML。

Answer 1

我想你在找什么

setTimeout(function () {
    var element = document.createElement('div');
    element.className = 'something';
    [].forEach.call(document.querySelectorAll(".a_random_class"), function (e) {
        var wrap = element.cloneNode(true);
        e.parentNode.insertBefore(wrap, e)
        wrap.appendChild(e);
    });
}, 300);

 setTimeout(function() { var element = document.createElement('div'); element.className = 'something'; [].forEach.call(document.querySelectorAll(".a_random_class"), function(e) { var wrap = element.cloneNode(true); e.parentNode.insertBefore(wrap, e) wrap.appendChild(e); }); }, 300); 

 .something { border: 1px solid red; padding: 5px; margin-bottom: 5px; } .a_random_class { background-color: lightgrey; } 

 <div class="a_random_class">a</div> <div class="a_random_class">b</div> <div class="a_random_class">c</div> <div class="a_random_class">d</div> <div class="a_random_class">e</div> <div class="a_random_class">f</div>