调用html（）方法时如何防止插入符号开始

Question

例如，页面有两列，左侧是原始文章，右侧是文本区域或内容可编辑div，来自原始文章的cory词。当我用html（）方法替换div的内容时，插入符号的位置就是开始。我该如何解决这个问题。

的JavaScript

    export default class WordCheck {

    constructor (essayContain, textInput) {
        this.$essayContain = $(essayContain);
        this.$textInput = $(textInput);
        this.init();
    }

    init() {
        this.essayTransport();
        this.initEvent();
    }

    essayTransport() {
        var self = this;
        this.essayArr = [];
        this.$essayContain.find('.essay-paragraph').each(function() {
            var $this = $(this);
            self.essayArr = self.essayArr.concat($.trim($this.text()).split(/\s+/g));
        });
    }

    initEvent() {
        var self = this;
        this.$textInput.on('keyup', function(e) {
            var $this = $(this);
                self.inputTextArr = $.trim($this.text()).split(/\s+/g);
            self.wordsCompare(self.essayArr, self.inputTextArr, e);
        });
    }

    wordsCompare(essay, input, e) {
        for (var i = 0; i < input.length; i++) {
            if (input[i] !== essay[i]) {
                // input.replace(input[i], '<i class="error">' + input[i] + '</span>');
                input[i] = '<i class="error">' + input[i] + '</i>';
            } 
        }
        this.markError(e);
    }


    markError(e) {
        var hasErrorText = this.inputTextArr.join(' ');
        this.$textInput.html(hasErrorText);
        // this.$textInput.trigger('focus');
    }

}
new WordCheck('.js-essay-container','.js-writing-essay');

HTML

 <div class="g-step-main">
            <div class="g-step-part">
               <h3>title</h3>
               <p class="essay-sub-cont">Some people think that human needs for farmland, housing, and industry are more important than saving land  endangered animals. Do you agree or disagree with this point of view? Why or why not? Use specific reasons and examples to support your answer.</p>
            </div>
            <div class="g-step-part g-clearfix js-essay-container">
                <div class="sense-group group-options fl">
                    <h3>essay</h3>
                    <div class="group-part">
                        <p class="essay-paragraph">Actually there are two main ways of travelling – travelling on your own and being led by a tour guide in group. Sometimes when we plan for a trip, it is always hard for us to choose between these two methods.</p>
                        <p class="essay-paragraph">Actually there are two main ways of travelling – travelling on your own and being led by a tour guide in group. Sometimes when we plan for a trip, it is always hard for us to choose between these two methods.</p>
                    </div>

                </div>
                <div class="sense-group group-answer fl">
                    <h3>copy</h3>
                    <div class="group-part">
                        <div contenteditable="true" class="js-writing-essay writing-essay">
                            Actually there are two main ways of travelling – travelling
                        </div>
                    </div>
                </div>
            </div>
        </div>

  

问题是当调用此。$ textInput.html（hasErrorText）时，插入符号将转到内容可编辑文本的开头。我该如何解决这个问题