Почему метод .html() не работает так как .innerHTML()?

[drakulawz]

Здравствуйте!

Есть такой скрипт:

var num = $('.p'),
        btn = $('.btn');

    btn.on({
        'click': sum
    });

    function sum() {
        for (var i = 0; i < num.length; i++) {
            num[i].innerHTML = num[i].innerHTML + ' ' + (i + 1);
        }
    }

Он должен ставить в конце каждого параграфа его, соответствующий, номер. НО! Проковырялся с jQuery минут 20 в итоге его метод .html() так и не вывел нумерацию в браузере (хотя через console.log(num) нумерация присваивается). В отличии от его аналога в нативном js - .innerHTML() - этим всё выводится (console.log(num) выводит всё то же, что и с html).
Буду очень благодарен если мне объяснит знающий человек в чём тут дело, так как во всех источниках указано, что эти методы являются аналогами друг друга.

[laimas]

в чём тут дело

Не правильное использование.

[Dilettante_Pro]

<div class="p">Первый</div>
<div class="p">Второй</div>
<div class="p">Третий</div>
<div class="p">Четвертый</div>
<button class="btn">Sum</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
var num = $('.p'),
        btn = $('.btn');

    btn.on({
        'click': sum
    });

    function sum() {
        for (var i = 0; i < num.length; i++) {
            $(num[i]).html( $(num[i]).html() + ' ' + (i + 1));
        }
    }
</script>

[drakulawz]

Dilettante_Pro

Благодарю!

[Aetae]

<div class="p">Первый</div>
<div class="p">Второй</div>
<div class="p">Третий</div>
<div class="p">Четвертый</div>
<button class="btn">Sum</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
var $num = $('.p'),
        btn = $('.btn');

    btn.on({
        'click': sum
    });

    function sum() {
        $num.append(function(i){return ' ' + ++i});
    }
</script>

[drakulawz]

Aetae

разве так будет работать, без цикла?
У меня не работает...

Dilettante_Pro

кстати, а как записать вот такое через html:

function sum() {
        var arr = [];
        for (var i = 0; i < num.length; i++) {
            arr[i] = +num[i].innerHTML;
            inp.val(arr.sort(srt));
        }
    }

Функция сортирует номера в параграфах и выводит в инпут, по возрастанию. Но когда ставлю вместо innerHTML html то выводит NaN.

[Dilettante_Pro]

Но когда ставлю вместо innerHTML html то выводит NaN.

Вместо нельзя.
innerHTML - это свойство элемента DOM
.html() - это метод объекта jQuery
Смотрите внимательно пример в пост 3

[laimas]

как записать вот такое через html

Если уж "гибрид", то:

num.each(function(n, e) {
    e.innerHTML += ' ' + ++n
})

[drakulawz]

Вместо нельзя.

ОК. Тогда почему их называют аналогами друг друга?
https://x-twig.ru/blog/239/

Смотрите внимательно пример в пост 3

Я увидел, рассмотрел, понял и, даже, запомнил. Метод html записывает в массив параграфов тот же параграф но с добавлением нумерации - это понятно. Вся проблема была не в понимании а в синтаксисе - мне, почему-то, сложно запомнить эти нюансы.

[drakulawz]

Если уж "гибрид"

ещё не совсем понимаю значение слова гибрид в js.
Вот полноценный скрипт:

var   num = $('.p'),
        btn = $('.btn'),
        inp = $('input');

    btn.on({
        'click': sum
    });

    function sum() {
        var arr = [];
        for (var i = 0; i < num.length; i++) {
            arr[i] = +num[i].innerHTML;
            inp.val(arr.sort(srt));
        }
        
    }

    function srt(a, b) {
        if (a > b) {
            return -1;
        }
        if (a < b) {
            return -1;
        }
        if (a == b) {
            return 0;
        }
    }

Всё работает, я же говорил. Просто думал писать всё на jQuery, но теперь выходит, что так нельзя и innerHTML не заменится тут...