Get the number of rows and turn into Divs

Question

Good morning, recently I was writing this code and had some problems, I would like to get the number of lines of content from a div "contenteditable" and take these values (numbers) to another div.

Follow my simplified code:

	$(document).one('paste',function(e) {
		setTimeout(function() {
		var x = $('#input').contents().length;
     		$("#line").append ('<div>'+x);
		},100);
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div contenteditable="true" id="input" spellcheck="false"></div>
<div id="line"><div>0</div></div>

The results I’m getting when the number of lines in #input is 4:

<div id="line">
    <div>0</div>
    <div>4</div>
</div>

Simulation of the results I’d like to get when the number of lines in #input is 4:

<div id="line">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Just remembering that in <div id="line"><div>0</div></div> we already have a zero initially.

Briefly the problem is that I am getting only one div with the value of all lines, I would like to have one div for each line.

Hoping for some help, thank you.

Answer 1

Without the use of jquery you can do something like this:

function criarDivs(input){
  // TODO:: validação do input
  let total = document.getElementById('input').innerText;
    
  for (let i=1; i<=total; i++){
    let div = document.createElement('div');
    div.innerText = i;
    document.getElementById('line').appendChild(div);
  }
  
}

#input{
  width:100px;
  height:20px;
  background-color:#ccc
}

#line div{
  background-color: gold;
  margin:4px;
}

<div contenteditable="true" id="input">4</div>
<button type="button" onclick="criarDivs()">CRIAR DIVS</button>
<div id="line"></div>

Answer 2

Upon request by comment, here is the example.

Namely, I only use the on("blur") which means, when you don’t have focus, that is, when you click out of the input, and after counting the lines, for each line, I add the <div> who intends ...

$(function() {
  $("#input").on("blur", function(evt) {
    // numero de linhas do conteudo
    var len = $(this).contents().length;
    // cria output
    draw(len);
  });
});

function draw(lines) {
  // limpa #line para que comece sem conteudo
  $("#line").empty();
  
  // adiciona <div>X</div> por cada linha
  for(i = 0; i < lines; i += 1)
    $("#line").append("<div>"+i+"</div>");
}

#input {
  min-height: 100px;
  min-width: 100px;
  border: 1px dashed #bada55;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div contenteditable="true" id="input" spellcheck="false"></div>
<div id="line"><div>0</div></div>