Extracting distinct HTML list items into a JavaScript array This code is made to generate a list of unique elements of the array made of the other two arrays.
The fact that we need two lists to convert in two different array is part of the task.
This code handles with the task, but there's a lot of global variables. As far as I know, it is not good practice.
Tell me, please, how can I improve it?



&lt;body id="body"&gt;
&lt;div&gt;
  &lt;ul id="ul1"&gt;
    &lt;li&gt;Любовь&lt;/li&gt;
    &lt;li&gt;Надежда&lt;/li&gt;
    &lt;li&gt;Вера&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;ul id="ul2"&gt;
    &lt;li&gt;София&lt;/li&gt;
    &lt;li&gt;Надежда&lt;/li&gt;
    &lt;li&gt;Вера&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;button id="makeNewArray"&gt;Создать новый массив&lt;/button&gt;
&lt;script type="text/javascript"&gt;
  function init() {
    var btn = document.getElementById('makeNewArray'),
        arrLi1 = ul1.getElementsByTagName('li'),
        arrLi2 = ul2.getElementsByTagName('li'),
        arr1 = [],
        arr2 = [],
        result = [];
    for (var i = 0; i &lt; arrLi1.length; i++) {
      arr1.push(arrLi1[i].innerHTML);
    }
    for (var j = 0; j &lt; arrLi2.length; j++) {
      arr2.push(arrLi2[j].innerHTML);
    }
    commonArr = arr1.concat(arr2);
    nextInput:
      for (var k = 0; k &lt; commonArr.length; k++) {
        var str = commonArr[k];
        for (var l = 0; l &lt; result.length; l++) {
        if (result[l] == str) continue nextInput;
        }
        result.push(str);
      }
    btn.onclick = function() {
      var div = document.createElement('div');
      div.innerHTML = result;
      body.appendChild(div);
    };
  };
  window.onload = init;
&lt;/script&gt;
  &lt;/body&gt;
As already noticed by previous comments, don't mind about global variables if they're declared by var inside of a function.
And you can do the same for commonArray and str, unless they're used elsewhere (obviously, I don't think so).

In the other hand, you can dramatically reduce your code!

First because you don't have to wait for onload event, since your &lt;script&gt; is located at the end of the &lt;body&gt;.
So you may replace this structure:

  function init() {
    var btn = document.getElementById('makeNewArray'),
    // ...computing result...
    btn.onclick = function() {
      var div = document.createElement('div');
      div.innerHTML = result;
      body.appendChild(div);
    };
  };
  window.onload = init;


by this one:

  document.getElementById('makeNewArray').onclick = function() {
    // ...computing result...
    var div = document.createElement('div');
    div.innerHTML = result;
    body.appendChild(div);
  };


Then in the computing result part, you can also work in a more light way, using less variables and less statements. This achieved essentially by not creating temporary containers, and directly populating (or not) the final result while iterating the source &lt;ul&gt;s. Looks like this:

&lt;body id="body"&gt;
&lt;div&gt;
  &lt;ul id="ul1"&gt;
    &lt;li&gt;Любовь&lt;/li&gt;
    &lt;li&gt;Надежда&lt;/li&gt;
    &lt;li&gt;Вера&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;ul id="ul2"&gt;
    &lt;li&gt;София&lt;/li&gt;
    &lt;li&gt;Надежда&lt;/li&gt;
    &lt;li&gt;Вера&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;button id="makeNewArray"&gt;Создать новый массив&lt;/button&gt;
&lt;script type="text/javascript"&gt;
document.getElementById('makeNewArray').onclick = function() {
  var div = document.createElement('div'),
      sources = [ul1, ul2],
      result = [];
  for (var i = 0, n = sources.length; i &lt; n; i++) {
    var items = sources[i].getElementsByTagName('li');
    for (var j = 0, m = items.length; j &lt; m; j++) {
      var str = items[j].innerHTML;
      if (result.indexOf(str) == -1) {
        result.push(str);
      }
    }
  }
  div.innerHTML = result;
  body.appendChild(div);
};
&lt;/script&gt;
&lt;/body&gt;


Here is a working example.