Set the selector cursor to a new position in contenteditable div

Question

i've been making a text editor but i couldn't been able to get and set the "cursor" in a new position in the div with the content editable.

<form action="submitchapter.php" method="post">
    <div class="input-group mb-3" style="margin-top:30px;">
        <input type="text" class="form-control name" placeholder="Chapter Name" name="sname" value="No Title For The Chapter" required>
    </div>
    <div class="buttons shadow-sm">
        <button style="padding:0; border:0px solid white; background-color:white;" type="button" id="buttonbold"><i class="fas fa-bold" id="bold"></i></button>
        <input id="file-input" type="file" name="name" style="display: none;" />
    </div><br>
    <div class="containe shadow-sm" style="padding:20px; background-color:white;">
        <div class="content" contenteditable="true" name="content" id="content" role="textbox" spellcheck="false"></div>
    </div>

            var content = document.getElementById("content");

            var bold = document.getElementById("bold");
            var content = document.getElementById("content");
            $("#buttonbold").click(function(){
                content.focus();
                var valuelength = content.value.length - 4;
                content.setSelectionRange(content.value.length,valuelength);
            });
            var boldactive = false;
            $("#bold").click(function(){
                if (boldactive == false) {
                    var content1 = content.innerHTML;
                    content.innerHTML = content1 + "<b>";
                    boldactive = true;
                } else {
                    var content1 = content.innerHTML;
                    content.innerHTML = content1 + "</b>";
                    boldactive = false;
                }
            });

But nothing worked. I have tried with textarea too, but I think I'm doing something wrong.

Answer 1

<div> elements have no value property

$("#buttonbold").click(function(){
  content.focus();
  var valuelength = content.textContent.length - 4;
  content.setSelectionRange(content.textContent.length,valuelength);
});

.

---

<div> elements do not have a setSelectionRange method either, so here is a solution to make this kind of selection for elements using the contenteditable property:

const myDiv         = document.getElementById('my-div')
  ,   btSelectRange = document.getElementById('bt-select-range')
  ;
function setSelectionRangeCE(el, pos, len)
  { 
  el.focus();
  let range = document.createRange()
    , sel   = window.getSelection()
    ;
  range.setStart(el.firstChild, pos)
  range.setEnd(el.firstChild, pos+len)
  sel.removeAllRanges()
  sel.addRange(range)
  }
btSelectRange.onclick=_=>
  {
  setSelectionRangeCE(myDiv,2,5)
  }

#my-div {
  margin:  1em;
  padding: .7em;
  width:   16em;
  height:  3em;
  border:  1px solid grey;
  }
button {
  margin:  1em;
  }

<div id="my-div" contenteditable >hello world</div>

<button id="bt-select-range" > select range pos:2 len:5 </button>