獲取＃文檔片段的innerHTML而不是textContent

Question

我有一個contenteditable p標籤。當來自p標籤的內容被提取並被插入到另一個標籤中時，原件的所有標記都將丟失。有什麼方法可以保存標記嗎？

請注意，如果插入符號@段落的第i個位置，那麼字符提取從該位置直到最後開始。

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; 
} 

---

編輯：

嘿，你下來投我的答案，但你可以explan你想達到什麼？我上面寫的代碼可以看到在這個jsfiddle中工作：https://jsfiddle.net/936zuzky/1/

你想保存原始標記 - 它被保存，所以你想實現什麼？