A Linked List

This JavaScript Reference section displays the code for an example program that shows how to create a linked list in JavaScript.

LinkedList.html

<!DOCTYPE html>
<html>
	<head>
	    <title>XoaX.net's Javascript</title>
	    <script type="text/javascript" src="LinkedList.js"></script>
	</head>
	<body onload="fnInitialization()">
	</body>
</html>

LinkedList.js

// The Link Constructor
function CLink(qData) {
  this.mqData = qData;
  this.mqpNext = null;

  this.mfnDisplayNodeValue = function(qContainer) {
    var qValueDiv = document.createElement("div");
    qValueDiv.style.float = "left";
    qValueDiv.style.padding = "4px";
    qValueDiv.style.margin = "2px 1px";
    qValueDiv.style.textAlign = "center";
    qValueDiv.style.color = "black";
    qValueDiv.style.backgroundColor = "LightGray";
    qValueDiv.style.border = "2px gray solid";
    qValueDiv.innerHTML = this.mqData;

    var qArrowDiv = document.createElement("div");
    qArrowDiv.style.padding = "4px 0px";
    qArrowDiv.style.margin = "2px 0px";
    qArrowDiv.style.float = "left";
    qArrowDiv.style.textAlign = "center";
    qArrowDiv.style.color = "Gray";
    qArrowDiv.style.backgroundColor = "whitesmoke";
    qArrowDiv.innerHTML = "<strong>&rarr;</strong>";
    // Add the element to the container.
    qContainer.appendChild(qValueDiv);
    qContainer.appendChild(qArrowDiv);
    if (this.mqpNext != null) {
      this.mqpNext.mfnDisplayNodeValue(qContainer);
    } else {
      var qNullDiv = document.createElement("div");
      qNullDiv.style.padding = "4px";
      qNullDiv.style.margin = "2px 0px";
      qNullDiv.style.float = "left";
      qNullDiv.style.textAlign = "center";
      qNullDiv.style.color = "gray";
      qNullDiv.style.backgroundColor = "white";
      qNullDiv.style.border = "2px lightgray solid";
      qNullDiv.innerHTML = "NULL";
      qContainer.appendChild(qNullDiv);
    }
  }
}

// The LinkedList Constructor
function CLinkedList() {
  this.mqpHead = null;
  this.mfnInsertAtHead = function(qData) {
    var qpOldHead = this.mqpHead;
    this.mqpHead = new CLink(qData);
    this.mqpHead.mqpNext = qpOldHead;
  }
  this.mfnRemoveAtHead = function() {
    if (this.mfnIsEmpty()) {
      return false;
    } else {
      this.mqpHead = this.mqpHead.mqpNext;
	}
	return true;
  }
  this.mfnIsEmpty = function() {
    return (this.mqpHead == null);
  }
  this.mfDisplay = function() {
    if (!this.mfnIsEmpty()) {
      // Create a containing linked list div
      var qDisplayDiv = document.createElement("div");
      qDisplayDiv.style.marginTop = "20px";
      qDisplayDiv.style.width = "800px";
      qDisplayDiv.style.height = "34px";
      qDisplayDiv.style.border = "black 1px solid";
      qDisplayDiv.style.backgroundColor = "WhiteSmoke";
      document.body.appendChild(qDisplayDiv);
      this.mqpHead.mfnDisplayNodeValue(qDisplayDiv);
    }
  }
}

function fnInitialization() {
  var saPopes = ["Peter", "Linus", "Cletus", "Clement I",
    "Evaristus", "Alexander I", "Sixtus I", "Hyginus"];
  var qLinkedList = new CLinkedList();

  // Insert the Popes in the order of the array entries.
  for(var sCurr of saPopes){
    qLinkedList.mfnInsertAtHead(sCurr);
  }

  // Display the initial linked list
  var qParagraph = document.createElement("p");
  qParagraph.innerHTML = "Initial List";
  document.body.appendChild(qParagraph);
  qLinkedList.mfDisplay();

  // Remove the head
  qParagraph = document.createElement("p");
  qParagraph.innerHTML = "Removal at the Head";
  document.body.appendChild(qParagraph);
  qLinkedList.mfnRemoveAtHead();
  qLinkedList.mfDisplay();

  // Insert at the head
  qParagraph = document.createElement("p");
  qParagraph.innerHTML = "Insert at the Head";
  document.body.appendChild(qParagraph);
  qLinkedList.mfnInsertAtHead("Telesphorus");
  qLinkedList.mfDisplay();
}

Core JavaScript

A Linked List

LinkedList.html

LinkedList.js

Output