콘텐츠 편집 가능한 요소 끝에 캐럿을 배치하는 방법은 무엇입니까?

function setEndOfContenteditable(contentEditableElement) {
  var range, selection;
  if (document.createRange) { // Firefox, Chrome, Opera, Safari, IE 9+
    range = document.createRange(); // Create a range (a range is like the selection but invisible)
    range.selectNodeContents(contentEditableElement); // Select the entire contents of the element with the range
    range.collapse(false); // Collapse the range to the end point. False means collapse to end rather than the start
    selection = window.getSelection(); // Get the selection object (allows you to change selection)
    selection.removeAllRanges(); // Remove any selections already made
    selection.addRange(range); // Make the range you have just created the visible selection
  } else if (document.selection) { // IE 8 and lower
    range = document.body.createTextRange(); // Create a range (a range is a like the selection but invisible)
    range.moveToElementText(contentEditableElement); // Select the entire contents of the element with the range
    range.collapse(false); // Collapse the range to the end point. False means collapse to end rather than the start
    range.select(); // Select the range (make it the visible selection)
  }
}

elem = document.getElementById('txt1'); // This is the element that you want to move the caret to the end of
setEndOfContenteditable(elem);