Cross-Site Header Replacement

Replaceheader.js

(function(){
  "use strict";
  var originalHeader = document.getElementById('header-to-replace');
  var originalContent = originalHeader.innerHTML;
  var newHeader= document.createElement('header');
  newHeader.id = 'replaced-header'
  originalContent = originalContent.replace('{Test}','Lorem Ipsum');
  originalContent = originalContent.replace('{UserButtons}', '<button>Other Stuff</button><button>my Account</button><button>Shop</button>');
  originalContent = originalContent.replace('{nav}','<ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li></ul>');
  originalContent = originalContent.replace('{searchBox}','searchInput');
  newHeader.innerHTML = originalContent;
  originalHeader.parentNode.replaceChild(newHeader, originalHeader );
  var inputElement=document.getElementById('searchInput');
  var inputWrapper = document.createElement('span');
  inputWrapper.id='searchWrapper';
  inputWrapper.style.position='relative';
  var resultList= document.createElement('ol');
  resultList.id='resultList';
  resultList.style.display= 'none';
  resultList.style.position= 'absolute';
  resultList.style.left= '0';
  resultList.style.top= '100%';
  resultList.style.width= '600px';
  inputWrapper.appendChild(inputElement.cloneNode(true));
  inputWrapper.appendChild(resultList);
  inputElement.parentNode.replaceChild(inputWrapper, inputElement);
  inputElement=document.getElementById('searchInput');
  inputElement.onkeyup = searchInputHandler;
  inputElement.onblur = emptyInputHandler;
})();

function searchInputHandler(event) {
  "use strict";
  var currentInput = document.getElementById('searchInput').value;
  if (currentInput.length>3)
  {
    var resultList = document.getElementById('resultList');
    resultList.style.display = 'block'
    var s = document.createElement("script")
    s.type = 'text/javascript';
    s.src = 'https://raw.github.com/gist/2507206/responseValues.js';
    s.id = 'resultLoader';
    resultList.parentNode.appendChild(s);
  }
  else
  {
    document.getElementById('resultList').style.display='none';
  }
}

function emptyInputHandler(event) {
  "use strict";
  var resultList = document.getElementById('resultList');
  while (resultList.hasChildNodes() && resultList.childNodes.length > 5)
  {
    resultList.removeChild(resultList.firstChild);
  }
  document.getElementById('resultList').style.display='none';
}

responseValues.js

(function(){
  "use strict";
  var resultList = document.getElementById('resultList');
  while (resultList.hasChildNodes() && resultList.childNodes.length > 0)
  {
    resultList.removeChild(resultList.firstChild);
  }
  var newElement;

  newElement= document.createElement('li');
  newElement.innerHTML = '<a href="#">' + document.getElementById('searchInput').value + new Date + '</a>';
  resultList.appendChild(newElement);

  newElement= document.createElement('li');
  newElement.innerHTML = '<a href="#">' + document.getElementById('searchInput').value + new Date + '</a>';
  resultList.appendChild(newElement);

  newElement= document.createElement('li');
  newElement.innerHTML = '<a href="#">' + document.getElementById('searchInput').value + new Date + '</a>';
  resultList.appendChild(newElement);

  newElement= document.createElement('li');
  newElement.innerHTML = '<a href="#">' + document.getElementById('searchInput').value + new Date + '</a>';
  resultList.appendChild(newElement);

  newElement= document.createElement('li');
  newElement.innerHTML = '<a href="#">' + document.getElementById('searchInput').value + new Date + '</a>';
  resultList.appendChild(newElement);

  document.getElementById('resultLoader').parentNode.removeChild(document.getElementById('resultLoader'));
})();