如何在不復制已插入 contenteditable div 的文本的情況下克隆新行?我想要一個新的空白 div 輸入。非常感謝
<div id="wrapper">
<div id="row">
<div id="left">
<p><strong>Heading</strong></p>
<div contenteditable="true" data-placeholder="Type here...">
</div>
<div id="right">
<p><strong>Heading</strong></p>
<div contenteditable="true" data-placeholder="Type here...">
</div>
</div>
</div>
<button id="button" onlick="duplicate()">Add another row</button>
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('row');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "row" i;
original.parentNode.appendChild(clone);
}
uj5u.com熱心網友回復:
您需要選擇 contenteditable 元素并替換 html
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "row" i;
clone.querySelector('div[contenteditable="true"]').innerHTML = '';
original.parentNode.appendChild(clone);
}
uj5u.com熱心網友回復:
只需使用 DOM API 及其驚人的document.createElement:
const btn = document.getElementById('addRow');
const rowContainer = document.getElementById('row');
btn.addEventListener('click', function() {
const newDiv = document.createElement('div');
newDiv.contentEditable = true;
rowContainer.appendChild(newDiv);
});
[contenteditable=true] {
border: 1px solid #999;
}
<div id="wrapper">
<div id="row">
<p><strong>Heading</strong></p>
<div contenteditable="true" data-placeholder="Type here..."></div>
</div>
</div>
<button id="addRow">Add another row</button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/395999.html
標籤:javascript html
上一篇:'image'屬性在django中沒有與之關聯的檔案
下一篇:在應用flexbox時遇到問題
