JQuery для обновления HTML в переменной

Question

У меня есть кусок HTML кода, который выглядит примерно так:

<div id="MySeparateHTMLCode" style="margin:0px 0px 0px 0px; ">This is some text 
    <div id="DIV2">My Text That Changes</div> 
    <div id="DIV3">This is more text</div> 
</div> 

Этот кусок HTML прочитаются в переменную

var myVar = $('#MySeparateHTMLCode').html(); 

теперь нужно использовать jQuery для изменения «Мой текст, который изменяется» на «Мой новый текст переменной», когда он находится внутри переменной.

Как это делается?

Answer 1

Вот три способа сделать это:

$('#MySeparateHTMLCode').find("#DIV2").text("My New Variable Text"); 

Или:

$('#MySeparateHTMLCode #DIV2').text("My New Variable Text"); 

Или:

$("#DIV2").text("My New Variable Text") 

Answer 2

Оберните текст в HTML:

var myVar = $('#MySeparateHTMLCode').html('My New Variable Text'); 

Но я предлагаю вам использовать текст() метод вместо метода HTML().

Answer 3

Вы можете просто сделать это:

$('#MySeparateHTMLCode #DIV2').text('My New Variable Text'); 

Вы также можете использовать переменную myVar, но учтите, что .html() возвращает строку . Поэтому вам нужно выполнить поиск по строке и найти и заменить "My Text That Changes""My New Variable Text", а затем изменить HTML-код с новым текстом, который вы сделали с myVar. Это будет немного больше работы, чем необходимо (на мой взгляд). Если вы хотите, чтобы сделать это, хотя вы можете сделать это:

var myVar = $('#MySeparateHTMLCode').html(); // Get text 
myVar = myVar.replace("My Text That Changes", "My New Variable Text"); // change text 
$('#MySeparateHTMLCode').html(myVar); // place in HTML 

Here is an example of above. Но опять же, это не рекомендуется.

Answer 4

Один из подходов состоит в простом clone() главном элементе вместо захвата его html. Затем вы можете использовать методы jQuery на клоне.

Пример:

var myVar = $('#MySeparateHTMLCode').clone(); 

/* somewhere else in code */ 
myVar.find('#DIV2').text('new text'); 
/* do something with modified html */ 
$('#MySeparateHTMLCode').html(myVar.html()); 

DEMO

В качестве альтернативы вы можете создать новый элемент Кто в innerHTML является строка в MYVAR и maniplate, что новый элемент с использованием методов JQuery

var myVar = $('#MySeparateHTMLCode').html(); 
/* create element that contains string from mYVar*/ 
var $el=$('<div>').html(myVar); 
/* change text */ 
$el.find('#DIV2').text('new text'); 
/* do something with new innerHTML*/ 
$('#MySeparateHTMLCode').html($el.html());