If a textarea exists in your document create a button at the top of it

If a textarea exists in your document, create a button at the top of it

Live Preview

If you will run above code, you will get below output.

To create a textarea in HTML, you can use the <textarea> element. Here is an example of how you can use this element to create a textarea in your HTML document:

<textarea rows="4" cols="50" id = "textAreaEditor">
This is some default text for the textarea.
</textarea>

The rows attribute specifies the number of rows that the textarea should have, and the cols attribute specifies the number of columns that the textarea should have. The text between the opening and closing <textarea> tags will be the default text that appears in the textarea when the page loads.

You can also use other attributes to customize the textarea, such as the name attribute to give the textarea a name, the disabled attribute to disable the textarea, and the readonly attribute to make the textarea read-only.

Here is an example of a more advanced textarea element with additional attributes:

<textarea name="message" rows="10" cols="50" id = "textAreaEditor" placeholder="Enter your message here" required>
This is some default text for the textarea.
</textarea>

In this example, the name attribute is used to give the textarea a name of "message", the placeholder attribute is used to provide a hint to the user about what should be entered in the textarea, and the required attribute is used to indicate that the textarea must be filled out before the form can be submitted.

Below section show how to create JavaScript code

Id of the textarea is: textAreaEditor

Remember that you have to add jQuery library.

<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

var attr = $('#textAreaEditor').attr('id');
 
    if (typeof attr !== 'undefined' && attr !== false) {
         $('#textAreaEditor').attr('rows', 15);
        var parentId = $('#textAreaEditor').parent().attr('id');
        // alert(parentId);
        // alert("Attribute is present"); 
        var r = $('<button type="button"  onclick="setTextToCurrentPosParagraph()" class="btn btn-sm btn-outline-primary m-1"> <i class="fa-solid fa-circle-plus"></i> Paragraph </button>');
        
        const child = document.getElementById('textAreaEditor');
        child.parentElement.classList.add('parenttextAreaEditor');
        if(parentId){
          $('#'+parentId).prepend(r);
        }else{
           // alert("parentId");
            $('.parenttextAreaEditor').prepend(r);
        }
    }

If you will click on the auto created button then this code will fire.

  function setTextToCurrentPosParagraph() {
        var curPos =  document.getElementById("textAreaEditor").selectionStart;
        console.log(curPos);
        let x = $("#textAreaEditor").val();
        let text_to_insert = "<p> <strong> Output: </Strong> </p>";
        $("#textAreaEditor").val(x.slice(0, curPos) + text_to_insert + '\r\n' + x.slice(curPos));
        
    }