The variables element and prevTill remain constant within the while loop, causing it to potentially never execute if they are not initially equal. Additionally, the array of elements to iterate over is missing from the function.

To address this, consider updating the function to include the array of elements to iterate over, along with the start and end indices for the desired subset. This will allow for proper iteration over the array within the while loop.

var wrapper = document.getElementById('wrapper'),
  wrapperChildren = wrapper.children;

console.log(prevRange(wrapperChildren, 0, 2));

function prevRange(array, start, end) {
  var result = [];

  var curr = start;

  while (curr <= end) {
    result.push(array[curr]);
    curr++;
  }

  return result;
}

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner">I'm #02</li>
  <li class="inner">I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>

The key issue is the lack of iteration over the elements. By not changing the 'element' variable, it will never be equal to 'prevTill'. One way to solve this is by passing an array of element's children and iterating through it with a 'for' loop to define the desired range. This approach involves passing the array of elements along with the minimum and maximum indices for the child elements you wish to target.

Were you interested in implementing the following logic?

while (target !== null && target !== prevTarget)
{
    output.push(target);
    target = target.previousElementSibling;
}

Check out the latest demo.

There have been multiple responses provided, but I have come up with a comprehensive solution that caters to your specific needs.

function extractItemsInRange(startIndex, endIndex) {
   var index;
   var output = [];
   if (startIndex > endIndex) {
    // iterating backwards
    index = startIndex;

    while (index >= endIndex) { 
        output.push(dataArray[index]);
        index--;
    }
   }
   else if (startIndex < endIndex) {
    // iterating forwards
    index = startIndex;

    while (index <= endIndex) {
        output.push(dataArray[index]);
        index++;
    }
   }
   else {
    // return just one item
    output.push(dataArray[startIndex]);
   }

   return output;
}

To ensure you don't end up in an endless loop, it's important to iterate through elements. A functional example of the code could be structured like this:

function previousRange(element, previousElement) {
    var result = [];
    if (element === previousElement) {
        result.push(element);
        return result;
    }
    var siblings = element.parentNode.children; // The previous element is expected among the siblings
    var startSelection = false;
    for (var i = 0, child; child = siblings[i]; ++i) { // Iterating through siblings
        if (child === element || child === previousElement) { // Doesn't matter which comes first
            result.push(child);
            startSelection = !startSelection; // Start or stop selection
        } else if (startSelection) {
            result.push(child);
        }
    }

    /*while (element !== previousElement) this is your code
        result.push(element);*/
    return result;
}

There are multiple techniques to achieve this task. Personally, I find Nikhil's approach for moving backward quite effective, and a similar method can be implemented for moving forward using the nextSibling property.

In my experience, there have been challenges with utilizing next and previous methods, especially on browsers like IE and Edge - Thanks Microsoft!

Here is another straightforward alternative that does not depend on DOM next/prev:

var wrapper = document.getElementById('wrapper'),
    wrapperChildren = wrapper.children;

console.log(stopWhen(wrapperChildren[0],wrapperChildren[2]));

function stopWhen(start,end){
    var results = new Array()
        ,parent = start.parentElement
      ,startPos = Array.prototype.indexOf.call(parent.childNodes, start)-2
      ,endPos = Array.prototype.indexOf.call(parent.childNodes, end)-2;
      for(var i=startPos; i < endPos; i++){    
        if(parent.children[i] != null){
            results.push(parent.children[i]);
        }
      }
      return results;
}

Check out the modified version here: fiddle

Utilizing the Array prototype methods slice and indexOf.

getRangeElements(
  document.getElementById('wrapper'), // parent
  document.getElementById('li1'),     // start
  document.getElementById('li3')      // end
)

function getRangeElements (parent, start, end) {
  var children = parent.children
  return [].slice.call(
    children, 
    [].indexOf.call(children, start),
    [].indexOf.call(children, end) + 1
  )
}

Since ChildNodes do not naturally have array methods, we are using the call method to apply that functionality. By allowing childNodes to be treated like array elements, we can then determine the indexOf the child elements and slice the desired range.

Example HTML:

<ul id="wrapper">
  <li class="inner" id="li1">I'm #01</li>
  <li class="inner" id="li2">I'm #02</li>
  <li class="inner" id="li3">I'm #03</li>
  <li class="inner" id="li4">I'm #04</li>
</ul>

Resulting in:

[li#li1.inner, li#li2.inner, li#li3.inner]

JSFiddle example

If you want to automate the process, consider using a TreeWalker:

var wrapper = document.getElementById('wrapper');
var wrapperChildren = wrapper.children;

function findElementRange(rangeRoot, elementStart, elementEnd) {
  var result = [];
  var itr = document.createTreeWalker(
    rangeRoot,
    NodeFilter.SHOW_ELEMENT,
    null, // no filter
    false);
  itr.currentNode = elementStart;

  do {
    result.push(itr.currentNode);
  } while(itr.currentNode !== elementEnd && itr.nextSibling());

  return result;
}

console.log(findElementRange(wrapper, wrapperChildren[0], wrapperChildren[2]));

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner">I'm #02</li>
  <li class="inner">I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>

For more information on how TreeWalkers work, check out this link to MDN.

It's also beneficial to be familiar with the TreeWalker interface object.

I hope this explanation was useful.

*Edit - Here is an example that handles bidirectional ranges:

var wrapper = document.getElementById('wrapper');
var wrapperChildren = wrapper.children;

function findElementRange(elementStart, elementEnd) {
  var result = [];
  var rootNode;
  var indexStart;
  var indexEnd;
  
  rootNode = elementStart.parentNode;
  if(rootNode !== elementEnd.parentNode){
      return console.log("Cannot find Element Range, elements are not siblings");
  }
  
  //Determine traversal direction
  indexStart = Array.prototype.indexOf.call(rootNode.childNodes, elementStart);
  indexEnd = Array.prototype.indexOf.call(rootNode.childNodes, elementEnd);

  var itr = document.createTreeWalker(
    rootNode,
    NodeFilter.SHOW_ELEMENT,
    null, // no filter
    false);
  itr.currentNode = elementStart;
  var iterateMethod = indexStart < indexEnd ? 'nextSibling' : 'previousSibling';
  do {
    result.push(itr.currentNode);
  } while(itr.currentNode !== elementEnd && itr[iterateMethod]());
  
  return result;
}

console.log(findElementRange(wrapperChildren[1], wrapperChildren[3]));
console.log(findElementRange(wrapperChildren[3], wrapperChildren[1]));

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner"I'm #02</li>
  <li class="inner">"I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>