Question

我试图在contenteditable中动态地插入一些字符。意味着一旦我按下按钮字符再次插入，当我按下按钮字符插入前一个按钮后，但是从下面的代码中它只是一次又一次地重新插入。

Jquery的

function myFunc(){
$('#test').html('````````````````````````````');
}

HTML

<div id="test" contenteditable="true"></div>

<button onclick="myFunc()">CLICK</button>

Answer 1

每次尝试按照$('#test').append('a')

添加元素时，你都会重写元素的html

Answer 2

function myFunc(){
$('#test').append('````````````````````````````');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" contenteditable="true"></div>

<button onclick="myFunc()">CLICK</button>

您需要使用append（），而不是使用.html（），因为您要在html中添加新文本，.html（）将替换之前的文本。

Answer 3

你可以这样做：

function myFunc() {
  $('#test').html($('#test').html()+'````````````````````````````');
}

Here is the JSFiddle demo

但如果您还希望添加新行，请使用<br/>，如下所示：

function myFunc() {
  $('#test').html($('#test').html()+'````````````````````````````<br/>');
}

Here is the second demo

将字符动态插入到contentediatble div中

3 个答案: