1

How we can create a div next to selected word from the paragraph. Let say we have a paragraph.

"Hello how are you" if I select how then div should be created after this paragraph like

"Hello how are you" => <div id="newDiv"></div>

similarly

"whats going on" => <div id="newDiv"></div>

means how should I find that where to create a div?

Namit
  • 11
  • 3
  • I understood that you would like to have
    inside

    in some line. You cannot nest a

    element inside a

    element according to the HTML standard. Insted of

    you can put .
     – syp_dino Oct 07 '20 at 07:59
  • Ok then is there any way I can insert div after certain positions like I have start and end index of selected words can we do anything with those indexes? Because when I select any word I have its start and end index – Namit Oct 07 '20 at 08:01
  • You can take your text from paragraph like a string and in jquery use your start and end index to expand it. – syp_dino Oct 07 '20 at 08:27
  • @namit also you cannot have two seperate div's with the same ID they must be unique to each element, if you wish you can replace these with class.. – Ryan Stone Oct 07 '20 at 08:53

1 Answers1

0

I hope this will help you

 <h3>Select any of the line</h3>

<hr>

<div>
    <p> <span onclick="p1()">how are you ?</span> <br>
        <span onclick="p2()">hey what's up?</span> <br>
        <span onclick="p3()">Hello , where are you?</span> <br>
    </p>
</div>

<div>  <hr>
    <h3 style="display: none;" id="s-head">You Are Selected</h3>
    <h4 id="preview"> </h4>
</div>

<script>
    function p1(){
        document.getElementById("preview").innerHTML = "how are you ?"
        document.getElementById("s-head").style = "display:block"
    }

    function p2(){
        document.getElementById("preview").innerHTML = "hey what's up?"
        document.getElementById("s-head").style = "display:block"
    }

    function p3(){
        document.getElementById("preview").innerHTML = "Hello , where are you?"
        document.getElementById("s-head").style = "display:block"
    }
</script>
Ryan Stone
  • 345
  • 4
  • 19
AdDev
  • 428
  • 5
  • 14
  • Hii Thanks for your reply. So basically if I have one paragraph which contains 5 lines if I select one word from the first-line and click on the button Add Div then one div box will create at end of that line from which word is selected. – Namit Oct 07 '20 at 07:42
  • @namit if you wish to have a paragraph that is styled so it has 5 seperate lines then you should use the 
     html tag which stands for pre-formatted text and will retain any line breaks without the use of 
     alternatively use 5  elements inside of a paragraph.
     – Ryan Stone Oct 07 '20 at 08:49
  • Thank you but m not getting it can you add div after it recognizes line or word ? – Namit Oct 07 '20 at 09:18