Add Content Using Jquery

Question

My demo in JS Fiddle https://jsfiddle.net/dineshkanivu/5fp2sjgb/2/

I want to add content Dynamically to the id="myNote" in its 4th line. click the button lines , you can see total number of lines. i want to add some html content after 4th line. How can i do this using jQuery

Snippet :

$(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>

This will be *incredibly* difficult to achieve. You need to somehow calculate the first character of the 5th line and then insert the content required before that. — Rory McCrossan, May 13 '16 at 08:21
As an aside note related with @RoryMcCrossan , you need to try something by yourself and when you have a specific problem, ask to us with a working example reproducing the issue. Good luck. — Marcos Pérez Gude, May 13 '16 at 08:22
i think the snippet is a bit off?it is showing 156 lines?when you count the lines it is only 10 — guradio, May 13 '16 at 08:27

score 3 · Accepted Answer · edited May 23 '17 at 10:28

According to this post I wrote a little function to do this. Surely there a more efficent way. But it works fine.

I wrap every word in an own span. After that I check the positions of all spans, get the line number and add a class with this line number to the span.

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/

Add Content Using Jquery

1 Answers1