Как вставить объект html в текст div в определенной позиции?

Question

У меня есть div, который содержит некоторый текст ввода пользователем.

Я хочу, чтобы иметь возможность вставлять объект html, span позволяет говорить в определенной позиции в тексте этого div.

Например:

<div> 
    There is some text in this div and I would like to append an html object right here. 
    There might be some other text here. 
</div> 

Для того, чтобы превратить его в:

<div> 
    There is some text in this div and I would like to append an html object <span class="safeHtml"></span> right here. 
    There might be some other text here. 
</div> 

Некоторые вещи, чтобы принять во внимание:

1. Я не хочу, чтобы сделать весь DIV как безопасный HTML , поскольку пользовательский ввод может содержать теги html, которые могут испортить мой дизайн или некоторые неприятные скрипты.
2. Я хочу визуализировать как html только вставленный объект; остальное как текст.

Благодаря

PS: достаточно Конкретные сейчас, или я должен нарисовать картину на доске для тех, кто закрыл вопрос и downvoters?

Answer 1

Вы можете сделать это, чтобы заменить right here:

$('div').each(function(){ 
    $(this).html($(this).html().replace(/right here/, '<span>something</span>')); 
}); 

Если вы просто хотите вставить, вы можете сделать:

$('div').each(function(){ 
    var html = $(this).html(); 
    var i = html.indexOf('right here'); 
    if (i>=0) $(this).html(html.slice(0, i)+'<span>something</span>'+html.slice(i)); 
}); 

Answer 2

У меня возникли проблемы с пониманием вопроса. Но я думаю, это то, что вы ищете. http://jsfiddle.net/rexonms/wzBh3/

HTML

<div> 
    Some text. <span id="newText"> </span> .Some more text. 
</div> 

Javascript

var htmlObject = "Text from HTML object"; 
$("#newText").append(htmlObject);