Заменить узел на innerhtml

Question

С помощью JavaScript я хочу удалить определенный узел DOM и заменить его на innerHTML. Например я хочу изменить

<div>
...
   <div id="t1">
        this is <b> the text </b> I want to remain.
   </div>
...
</div>

Для

<div>
...
    this is <b> the text </b> I want to remain.
...
</div>

Answer 1

Попробуйте это:

var oldElem = document.getElementById('t1');
oldElem.innerHTML = 'this is <b> the text </b> I want to remain.';
var parentElem = oldElem.parentNode;
var innerElem;

while (innerElem = oldElem.firstChild)
{
  // insert all our children before ourselves.
  parentElem.insertBefore(innerElem, oldElem);
}
parentElem.removeChild(oldElem);

Здесь есть демо .

Это фактически то же самое, что и .replaceWith() из jQuery:

$("#t1").replaceWith('this is <b> the text </b> I want to remain.');

Answer 2

var t1 = document.getElementById("t1"); t1.outerHTML = "this is <b> the text </b> I want to remain.";

http://youmightnotneedjquery.com/#replace_from_html

Answer 3

Это работает:

var t1 = document.getElementById("t1");
t1.parentNode.innerHTML = t1.innerHTML;

Edit:

Обратите внимание, что если у родителя t1 есть другие дочерние элементы, вышеприведенное также удалит всех этих детей. Следующее исправляет эту проблему:

var t1 = document.getElementById("t1");
var children = t1.childNodes;
for (var i = 0; i < children.length; i++) {
    t1.parentNode.insertBefore(children[i].cloneNode(true), t1);
}
t1.parentNode.removeChild(t1);

Answer 4

Если вы используете jQuery , вы можете попробовать

var inner = j$("#t1").html()
$('#t1').replaceWith(inner);

Answer 5

На самом деле это очень просто:

let span = document.getElementById('id');
span.outerHTML = span.innerHTML;

Answer 6

вы можете использовать jquery , если это возможно. это сделало бы вашу жизнь намного проще.

Если у вас есть jquery, вы можете легко сделать это через

$("#t1").html("this is <b> the text </b> I want to remain.");

и если вам сложно учиться, вы всегда можете начать с изучения селекторов jquery. ты не узнаешь, почему ты не использовал это все это время:)

извините, если это не то, что вы хотите именно ..

~ JQuery наркоман

Обновлен:

Чтобы показать, какой HTML-текст поместить внутрь.

Answer 7

Я только что изменил HTML. Вот так.

<div>
<div id="t0">
<div id="t1">
        this is <b> the text </b> I want to remain.
</div>
</div>
</div>

И вы делаете что-то вроде

document.getElementById("t0").innerHTML = "this is <b> the text </b> I want to remain.";

Надеюсь, что это работает