javascript - 使用 Jquery 添加内容

Question

我在 JS Fiddle 中的演示 https://jsfiddle.net/dineshkanivu/5fp2sjgb/2/

我想将内容动态添加到 id="myNote" 的第 4 行。点击按钮lines ，你可以看到总行数。我想在第 4 行之后添加一些 html 内容。我怎样才能使用 jQuery 做到这一点

片段:

$(function() {
  $("#getLines").click(function() {

    var myheight = $("#myNote").height();
    parseFloat($("#myNote").css("line-height"));
    //$('#myNote').after('<button>button</button>');
    alert(myheight);

  });
});

#myNote {
  width: 300px;
  line-height: 1;
  height: auto;
  text-align: justify;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myNote">
  Finally, designing the last sentence in this way has the added benefit of seamlessly moving the reader to the first paragraph of the body of the paper. In this way we can see that the basic introduction does not need to be much more than three or four
  sentences in length. If yours is much longer you might want to consider editing it down a bit! Here, by way of example, is an introductory paragraph to an essay in response to the following question:
</div>

<button id="getLines">lines</button>

Answer 1

根据这个post我写了一个小函数来做到这一点。当然还有更有效的方法。但它工作正常。

我将每个单词包装在自己的范围内。之后我检查所有跨度的位置，获取行号并将具有此行号的类添加到跨度。

function insertTextAtLine(target,lineNumber,textInsert){ 

var words = target.text().split(' '); 
var text = ''; 
$.each(words, function(i, w){
               if($.trim(w)) text = text + '<span>' + w + '</span> '; 
});  

target.html(text); 
var line = 0; 
var prevTop = - parseFloat($("#myNote").css("line-height")); 
$('span', target).each(function(){ 
  var word = $(this); 
  var top = word.offset().top; 
  if(top != prevTop){ 
    prevTop = top; 
    line++; 
  } 
  word.attr('class', 'line' + line); 

}); 
var insert=$('<span />').text(textInsert);
target.find('.line'+lineNumber).first().prepend(insert);
};  

fiddle :https://jsfiddle.net/tye3czva/4/