Получите innerHTML # документа-фрагмента вместо textContent

Question

У меня есть контент-ориентированный тэг. Когда содержимое из тэга p извлекается и вставляется в другой тег, вся разметка оригинала теряется. Есть ли способ сохранить разметку?

Пожалуйста, обратите внимание, если каретки является @ г-го положения в пункте, то символов извлекаются, начиная с этой позиции до конца.

function select() { 
 
    var el = document.getElementById('p'); 
 
    el.focus(); 
 

 
    var sel = window.getSelection(); 
 
    var selRange = sel.getRangeAt(0); 
 

 
    var range = selRange.cloneRange(); 
 
    range.selectNodeContents(el); 
 
    range.setStart(selRange.endContainer, selRange.endOffset); 
 

 
    document.getElementById('other').innerHTML = (range.extractContents().textContent); 
 
    // return range.extractContents().textContent; 
 
}

p { 
 
\t background-color: #eee; 
 
} 
 

 
.red { 
 
    color: red; 
 
}

<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p> 
 
<p id="other"></p> 
 
<button onclick="select()">SELECT</button>

Answer 1

range.extractContents() возвращает DocumentFragment.

DocumentFragment не имеет innerHTML. innerHTML исходит из интерфейса Element, а textContent является частью интерфейса Node. DocumentFragment наследует от Node, но не Element.

Это означает, что вы могли бы просто добавить весь фрагмент, потому что это Node:

function select() { 
 
    var el = document.getElementById('p'); 
 
    el.focus(); 
 

 
    var sel = window.getSelection(); 
 
    var selRange = sel.getRangeAt(0); 
 

 
    var range = selRange.cloneRange(); 
 
    range.selectNodeContents(el); 
 
    range.setStart(selRange.endContainer, selRange.endOffset); 
 

 
    //document.getElementById('other').innerHTML = (range.extractContents().textContent); 
 
    var frag = range.extractContents(); 
 
    var i; 
 
    var node; 
 
    var other = document.getElementById('other'); 
 
    other.innerHTML = ''; 
 
    other.appendChild(frag); 
 
}

p { 
 
\t background-color: #eee; 
 
} 
 

 
.red { 
 
    color: red; 
 
}

<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p> 
 
<p id="other"></p> 
 
<button onclick="select()">SELECT</button>

Answer 2

Вы не значит, что-то вроде этого?

document.getElementById('other').innerHTML = el.innerHTML; 

Ваш Javascript, то будет так же просто, как:

function select() { 
    var el = document.getElementById('p'); 
    el.focus(); 

    document.getElementById('other').innerHTML = el.innerHTML; 
} 

---

EDIT:

Эй, вы вниз проголосовали мой ответ, но вы можете explan то, что вы хотите достичь ? Код, который я написал выше, вы можете увидеть в этом jsfiddle: https://jsfiddle.net/936zuzky/1/

Вы хотите сохранить оригинальную разметку - она ​​сохранена и что вы хотите достичь?