Home/ Questions/Q 6914045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T09:17:50+00:00

context = document.createElement(span); start_element = my_start_element; end_element = my_end_element; // some how iterate through

  • 0
context = document.createElement("span");
start_element = my_start_element;
end_element = my_end_element;

// some how iterate through here (assuming start and end are different elements)
[start_element .. end_element].each(function(current_element){
   context.append(current_element);
});

pretty straight forward, just don’t know how to do the loop part with the start and end nodes. =\

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can also accomplish this with the plain DOM and DocumentFragment.

    Assuming that the start and end nodes are siblings and you have the following html:

    <html>
<head>
    <title></title>
</head>
<body>
<div>
    <p>paragraph 1</p>
    <p id="start">paragraph 2</p>
    <p>paragraph 3</p>
    <ul id="end">
        <li>paragraph 4</li>
    </ul>
    <p>paragraph 5</p>
</div>
</body>
</html>

    The following JS will copy the nodes and insert them in another place.

    var start = document.getElementById('start');
var end = document.getElementById('end');

var newcontainer = document.createElement('div');
newcontainer.style.backgroundColor = 'red';

var clonednodes = document.createDocumentFragment();

var node = start, lastnode = null;
while (lastnode!=end){
    // note that cloneNode(true) will lead to duplicate id attributes
    clonednodes.appendChild(node.cloneNode(true));
    lastnode = node;
    node = lastnode.nextSibling;
}

newcontainer.appendChild(clonednodes);

document.body.appendChild(newcontainer);
    • 0