Добавление HTML в определенной позиции

Question

Я Div с contenteditable:

<div class="example" contenteditable="true">This is an example</div> 

Используя innerHTML, я получаю "Это пример".

В настоящее время на 7-е место (сразу после «есть»), я хочу, чтобы добавить HTML (<span class="yup">NOT</span>) дать следующее (либо с помощью click, focus что-нет)

<div class="example" contenteditable="true">This is <span class="yup">NOT</span> an example</div> 

Зная позицию курсора и innerHTML, как бы добавить в него html?

Я думал об использовании substr, затем .html(content), но это заменяет весь контент, и я хочу его избежать. Я хочу просто добавить контент непосредственно в определенную позицию.

Например: Замена всего содержимого и того, что я НЕ хочу делать.

Вместо того чтобы заменять его, я хочу просто «ввести» его.

Любые предложения будут высоко оценены.

Answer 1

Строки неизменяемы в JavaScript, вы не можете изменять контент, не создавая новый.

Это примерно как можно ближе друг от друга (на уровне substr и substring).

// Store the new data 
 
var newOutput = " <span class='yup'>NOT</span> "; 
 

 
// Get a reference to the target div 
 
var theDiv = $("div.example"); 
 

 
// Split the current content of the div where there are spaces 
 
// and return the individual words into a new array 
 
var words = theDiv.text().split(/\s+/g); 
 

 
// Inject the right pieces of the array along with spaces and the new content 
 
// into the div 
 
theDiv.html(words[0] + " " + words[1] + newOutput + words[2] + " " + words[3]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="example" contenteditable="true">This is an example</div>

Но, если у вас есть возможность генерировать содержимое div из чистого JavaScript, то вы можете придать правильную строку только один раз, как это (запустить этот фрагмент несколько раз так что вы можете увидеть изменение содержимого div, когда генерируются различные случайные числа).

// Store the new data 
 
var output1 = "This is an example."; 
 
var output2 = "This is <span class='yup'>NOT</span> an example."; 
 

 
// Get a reference to the target div 
 
var theDiv = $("div.example"); 
 

 

 
// Inject the correct string into the div based on some criteria 
 
var x = Math.random() > .5; 
 
x === true ? theDiv.html(output1) : theDiv.html(output2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="example" contenteditable="true">This is an example</div>

Answer 2

Вы не можете изменить HTML-строку элемента без установки всего содержимого. Я бы порекомендовал поставить <span class="yup">NOT</span> уже на место, но сделать его невидимым с помощью CSS. Тогда, если он переключен, вы просто сделаете его видимым с помощью Javascript.