JQuery: Как извлечь элемент и вставить текст / элемент перед извлеченным элементом?

Question

Алло,

Буду признателен за ваш совет. Учитывая следующий фрагмент:

<div id="parent"><div id="child">ChildText<span id="subchildtext"><b>SubChildText</b></span></div></div>

Я хочу:

1. Извлечь элемент span
   ==> var span = $("#child").find("span");

2. Добавьте немного текста ("foobar") и новый элемент HTML ("<b> foorbarbold </b>)
   ==> span.insertBefore("foobar<b>foobarbold</b>")

3. Вставить этот новый элемент "в" родительский элемент (ID = PArent элемент)
   ==> $("#parent").html(span);

Результат должен быть: <div id="parent">foobar<b>foobarbold</b><span id="subchildtext"><b>SubChildText</b></span></div>

Но это не работает. Я не могу вставить новый контент в извлеченный элемент. Как я мог сделать это?

Большое спасибо! Тим

Answer 1

Чтобы установить HTML родительского, попробуйте это:

$("#parent").html(span.html());

Но вы можете обнаружить, что вам нужно удалить оригинал, в этом случае вам может понадобиться.

span.remove();

Тем не менее, следующее может работать для вас в одной строке (я не проверял, но это в правильных строках)

span.appendTo("#parent");

Или, если хотите, в начале

span.preprendTo("#parent");

Некоторые ссылки для вас:

http://docs.jquery.com/Manipulation/prependTo

http://docs.jquery.com/Manipulation/remove

Надеюсь, это поможет

Answer 2

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

$('#parent').html($('#subchildtext')).prepend('foobar<b>foodbarbold</b>');

Answer 3

Я не знаю jQuery, но вот как вы делаете это с javascript

var span = document.getElementById("subchildtext");
var newBold = document.createElement("b");
newBold.appendChild(document.createTextNode("foobarbold"));
span.insertBefore(newBold, span.firstChild);
span.insertBefore(document.createTextNode("foobar"), span.firstChild)