jquery - change the source code online -

i'm trying allow client change paragraph content visiting page, i.e. in pure wysiwyg mode.

for example clicking on first paragraph add green before existing content.

<p>123</p> <p>456</p> <p>789</p> 

js

 $("p").attr('contenteditable', true);  $("#btnsave").click(function() {     var = `currentparagraph.newcontent`; console.log(a) //i need `green 123` here }); 

how edited content variable ?

also, changing server source code send new content using php-jquery ajax code, how tell server on paragraph new content should applied ?

any help?

try using input event attached p elements, .index(), $.post()

var curr = null;     $("p").attr('contenteditable', true).on("input", function() {     curr = $(this).index() -1   })    $("#btnsave").click(function() {      var = $("p").eq(curr).text();      console.log(a, $("div").html()); //i need `green 123` here      // post `p` elements server      // $.post("/path/to/server", {data:$("div").html()})  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>  <div>  <p>123</p>  <p>456</p>  <p>789</p>    </div>  <button id="btnsave">click</button>