Как создать переменную javascript из элемента DOM, используя jQuery

Question

Допустим, у меня есть следующий элемент DOM на моей странице:

<div id="name">Sharon</div>

1: Используя jQuery, как мне превратить содержимое #name в переменную JS, чтобы я мог использовать его в других места на DOM?

Q2: Каков наилучший способ рендеринга переменной JS в мой HTML с помощью jQuery? Если сделать еще один шаг вперед, если я захочу удалить содержимое элемента, замените его на переменную, как лучше всего это сделать?

Answer 1

Чтобы сохранить «Шарон» в переменной, используйте html () :

var content = $('#name').html();

Чтобы отобразить его где-то еще (заменив все, что было в этом HTML-теге ранее):

$('#example').html(content);

Или, чтобы добавить после любого содержимого в теге #example, используйте

$('#example').append(content);

Также посмотрите prepend () .

Answer 2

Q1: Вы можете просто получить HTML с .html():

var content = $('#name').html();

Если вы ищете только текст (без стиля), вместо этого используйте функцию .text():

var content = $('#name').text();

Q2: Установка параметра для функции .html() устанавливает HTML этого целевого элемента:

$('#otherName').html('I am the <i>new</i> content');

Аналогично, если вы только устанавливаете текст, замените .html() на .text() в моем коде.

Answer 3

Я знаю, что вы имеете в виду.с .html() вы просто получаете строку с тем, что находится внутри выбранного элемента, и вы не можете связывать события или подобные вещи с помощью твердого JavaScript, когда вы выбираете элемент с помощью jQuery или jQuery, тогда .html().

Когда вы определяете переменную для селектора jQuery, она не совпадает с той, которую вы определяете для сплошного JavaScript.

$('body') == document.getElementsByTagName('body')[0]
//false

с помощью .html() не решит вашу проблему:

('body').html() == document.getElementsByTagName('body')[0]
//false

.html() дает вам строку, равную тому, что находится внутри элемента:

$('body').html() == document.getElementsByTagName('body')[0].innerHTML.toString()
//true

Дело в том, что селекторы jQuery всегда возвращают массив, который содержит каждый элемент, соответствующий данному событию запроса, если ваш запрос возвращает один элемент, он возвратитмассив с одним элементом.Поэтому, выбрав любой элемент из каждого массива селектора jQuery, вы получите фактический элемент DOM.

$('body')[0] == document.getElementsByTagName('body')[0]

Попробуйте это в своем инструменте разработчика браузера, чтобы увидеть результат!: D