Обобщающий пример
картинка смайлика 
<div id="raz"><b>картинка смайлика</b> <img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик" height="32" width="32"></div>
innerHTML в JavaScript
innerHTML [w3.org] — содержимое тега.
12345<input type="text" oninput="this.nextSibling.innerHTML = this.value;"><mark></mark>
innerText или textContent в JavaScript
innerText — содержимое тега, где вложенные теги = текст. Не работает в Mozilla Firefox.
<b>12345</b><input type="text" oninput="this.nextSibling.innerText = this.value;"><mark></mark>[ ]
<input type="text" oninput="this.nextSibling.innerText = this.value;"> <mark>[ ]</mark>
textContent [w3.org] — содержимое узла, где вложенные теги = текст. Работает и с style, и с script. Поддерживает IE 9 версии и выше.
<b>12345</b><input type="text" oninput="this.nextSibling.textContent = this.value;"><mark></mark><b>12345</b>[ ]
<input type="text" oninput="this.nextSibling.textContent = this.value;"> <mark>[ ]</mark>
Статья по теме: Регулярные выражения. См. пример как автоматом символы < > преобразовать в < >.
outerHTML в JavaScript
outerHTML [w3.org] — содержимое тега + сам тег. Если из input удалить все теги, то воссоздать их уже не удастся.
12345<input type="text" oninput="this.nextSibling.outerHTML = this.value;"><mark></mark>
outerText в JavaScript
outerText — содержимое тега, где вложенные теги = текст, удаляет сам тег. В примере использован метод CTRL+C/CTRL+V. Не работает в Mozilla Firefox.
<b>12345</b><input type="text" oninput="this.nextSibling.outerHTML = this.value;"><mark></mark>
Комментариев нет: