Как по клику на <i> добавить значение в div?

var pol = document.querySelector(".pol"); 
document.querySelectorAll(".change i").forEach(function(element) { 
  element.addEventListener("click", function() { 
    pol.textContent = element.textContent; 
  }); 
});

<div class="pol"></div> 
<div class="change"> 
  <i>1</i> 
  <i>2</i> 
  <i>3</i> 
  <i>4</i> 
  <i>5</i> 
  <i>6</i> 
  <i>7</i> 
  <i>8</i> 
  <i>9</i> 
</div>

document.querySelector(".change").addEventListener('click', function(e) { 
  if (e.target.tagName === 'I') { 
    document.querySelector(".pol").textContent += e.target.textContent 
  } 
})

.pol:empty:before { content: "\A0" }

<div class="pol"></div> 
 
<div class="change"> 
  <i>1</i> 
  <i>2</i> 
  <i>3</i> 
  <i>4</i> 
  <i>5</i> 
  <i>6</i> 
  <i>7</i> 
  <i>8</i> 
  <i>9</i> 
</div>

;(function(){ 
	var polElems = document.getElementsByClassName('pol'); 
	var changeElems = document.querySelectorAll('.change > i'); 
	Array.prototype.forEach.call(changeElems, function(item) { 
		item.addEventListener('click', function(){ 
			var self = this; 
			Array.prototype.forEach.call(polElems, function(pol){ 
				var newItem = self.cloneNode(true); 
				// Может пригодится 
				newItem.addEventListener('click', function(){ 
					this.remove(); 
				}); 
				pol.appendChild(newItem); 
			}); 
		}); 
	});	 
})();

<div class="pol"></div> 
<div class="change"> 
<i>1</i> 
<i>2</i> 
<i>3</i> 
<i>4</i> 
<i>5</i> 
<i>6</i> 
<i>7</i> 
<i>8</i> 
<i>9</i> 
</div> 
<!-- для примера  -->  
<div class="pol"></div> 
<div class="pol"></div>

$('.change').on('click', 'i', function() { 
	$('.pol').append($(this).text()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="pol"></div> 
<div class="change"> 
<i>1</i> 
<i>2</i> 
<i>3</i> 
<i>4</i> 
<i>5</i> 
<i>6</i> 
<i>7</i> 
<i>8</i> 
<i>9</i> 
</div>