为什么我的appendChild两次追加元素？

Question

我正在尝试为我的网站创建一个文本编辑器（使用可编辑的div），当我尝试使用appendChild（）追加一个子代时，它将子代追加两次。我该怎么办？

我已经尝试用innerHTML替换appendChild，但是可惜它不起作用。

var docFragment = document.createDocumentFragment();

var section = document.createTextNode('\n');
docFragment.appendChild(section);

var span = document.createElement('div');
span.dataset.kind = "span";
span.classList.add("active");

var element_contener = document.createElement('div');
                element_contener.classList.add("element_contener");
element_contener.innerHTML = end;

var br = document.createElement('br');

section = document.createElement('div');
section.dataset.type = "plain";         
section.dataset.dir = "ltr";
section.dataset.indent = "0";
section.dataset.kind = "section";
section.appendChild(span);
span.appendChild(element_contener);
element_contener.appendChild(br);

childer.parentNode.insertBefore(section, childer.nextSibling);

var range = document.createRange();
range.collapse(true);
range.setStart(element_contener, 0);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

因此，当我在可编辑的div中单击Enter时，我希望它具有以下内容：

<div data-type="plain" data-dir="ltr" data-indent="0" data-kind="section">
    <div data-kind="span" class="active">
        <div class="element_contener">
            <br>
        </div>
    </div>
</div>

代替此：

<div data-type="plain" data-dir="ltr" data-indent="0" data-kind="section">
    <div data-kind="span" class="active">
        <div class="element_contener">
            <br>
        </div>
        <div class="element_contener">
            <br>
        </div>
    </div>
</div>