Как мне проще использовать + = с селекторами jQuery?

Question

Я взял следующий пример из JS Bin:

HTML

<p id='js'>Hello, World!</p>`

JavaScript

document.getElementById('js').innerHTML += ' – this was inserted using JavaScript';`

Теперь я хотел бы сделать то же самоес помощью jQuery.Поскольку я не смог найти способ использовать + = с селекторами jQuery (иначе я бы не стал задавать этот вопрос), вот длинный путь:

var js = $('#js').html() + ' – this was inserted using JavaScript';
$('#js').html(js);

Я использую jQueryпотому что это синтаксис короче и проще.Но эти два кода имеют почти одинаковую длину.

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

$('#js').innerHTML += ' – this was inserted using JavaScript';

Answer 1

С помощью jQuery вы можете использовать append.

Ваш $('#js').innerHTML += ' – this was inserted using JavaScript'; будет работать с [0], например:

$('#js')[0].innerHTML += ' – this was inserted using JavaScript';
//      ^^^--- here

... потому что вы можете получить доступ к необработанному элементу DOM таким образом.Но добавлять контент через innerHTML - плохая идея, потому что это заставляет браузер работать очень сложно: сначала он должен пройти через свой внутренний эквивалент DOM, сериализовав его в строку HTML, затем он должен заново интерпретировать новый HTML послеВы сделали свой +=.(Конечно, последнее будет действительно, очень быстро , потому что рендеринг HTML во их внутренние структуры - это , что делают браузеры , и они сильно оптимизированы для этого, но первый может не быть быстрымвсе.)

Answer 2

$('#js').append(' – this was inserted using JavaScript');