Как усовершенствовать код и избавиться от множества глобальных переменных?
https://jsfiddle.net/koceg/66dd35hr/
В вашем коде, несмотря на то, что он небольшой, довольно много проблем. Давайте пойдем по порядку:Он в принципе не работает, потому что переменной body не существует. Нужно обращаться через document.body.У вас всё в одной функции. Отсюда и глобальные переменные (на самом деле они не глобальные, а ограничены этой функцией, но всё же) и дублирование одного и того же кода.Использование того, что в глобальной области видимости создаются переменные для каждого элемента с id (ul1, ul2) - плохая практика. Чуть раньше вы корректно воспользовались document.getElementById().Использование label в continue - приравнивается к goto и является уголовно наказуемым деянием.Вместо собственной реализации поиска нужно использовать стандартный метод indexOf, тогда и goto не понадобится.Из-за использования innerHTML, достаточно просто перенести закрывающий тег </li> на новую строку, чтобы элемент задублировался.Код срабатывает при старте страницы, а не тогда, когда он реально нужен. Это и само по себе проблема - зачем делать вычисления, которые неизвестно понадобятся ли, и не позволит изменить результат при изменении списков.Есть еще несколько мелочей, которые я не стал править, вроде установки обработчиков событий через .onclick, это будет домашнее задание.
Вот более правильный вариант, вам правда уже быстрее меня ответили.<script type="text/javascript">
		(function () {
			function makeArray() {
				var arr1 = getArray("#ul1"),
					arr2 = getArray("#ul2");

				function getArray(selector) {
					if (selector)
						return Array.prototype.slice.apply(document.querySelector(selector).getElementsByTagName('li'))
							.map(function (curr) {
								return curr.innerHTML
							})
					return [];
				}

				for (var i = 0; len = arr2.length, i < len; i++) {
					if (arr1.indexOf(arr2[i]) < 0)
						arr1.push(arr2[i])
				}
				return arr1.join(", ");
			};

			document.getElementById('makeNewArray').onclick = function () {
				var div = document.createElement('div');
				div.innerHTML = makeArray();
				body.appendChild(div);
			};
		})();
	</script>
Но это легко понимаемый вариант с получением списков по отдельности.
Если же вам все равно сколько списков и не важно, откуда каждый элемент по отдельности, есть мегакороткий вариант:<script type="text/javascript">
		(function () {
			function makeArray() {
				return Array.prototype.slice.apply(document.querySelectorAll("li"))
					.map(function (curr) {
						return curr.innerHTML
					})
					.filter(function (item, pos, self) {
						return self.indexOf(item) == pos;
					})
					.join(", ");
			};

			document.getElementById('makeNewArray').onclick = function () {
				var div = document.createElement('div');
				div.innerHTML = makeArray();
				body.appendChild(div);
			};
		})();
	</script>