Не можете найти мой jQuery на странице? это отображает загруженные данные позади других элементов?

Question

Итак, моя основная задача c - просто использовать функцию стиля jQuery для отображения слова «привет». Я хочу этого, чтобы в будущем я мог персонализировать привет. «Привет» + $ username. Я приложил свой код.

<h3 onLoad = "helloMessage();" id="id"> </h3>

мой. js файл выглядит следующим образом:

function helloMessage()
    {
    document.getElementById("id").innerHTML = "Hello ";
    }

Моя страница не выдает мне никаких ошибок, но когда я пытаюсь найти элемент h3 это просто дает мне область на странице без сообщения "Hello"? Это потому, что мой «Hello» возвращается в поле h3?

<h3 "Hello "> </h3>

Редактировать: я оценил, что я ошибался раньше.

Теперь у меня есть

$(document).ready(function(){
    $.fn.helloMessage = function(){ 
        alert ('Hello'); 
    }
    $(".hello").ready(function(){
        $.fn.helloMessage();
    });
});

Мой HTML выглядит так:

<h3 class="hello"> </h3>

Все нормально и работает. Однако я хочу, чтобы «Привет» отображался на веб-странице, а не как предупреждение. Если я попытаюсь использовать:

$(document).ready(function(){
    $.fn.helloMessage = function(){ 
        return ('Hello'); 
    }
    $(".hello").ready(function(){
        $.fn.helloMessage();
    });
});

Окончательное редактирование: Спасибо, Рори, ваш тщательный ответ помог мне выяснить, где я ошибался. Кроме того, YamneZ благодарит за помощь в решении проблемы с дисплеем.

Answer 1

Нет атрибута onload для h3 элементов. Если вы хотите запустить эту функцию при загрузке страницы, вызовите ее напрямую:

function helloMessage() {
  document.getElementById("id").innerHTML = "Hello";
}

helloMessage();

<h3 id="id"></h3>

Ваш JS должен быть помещен непосредственно перед </body>, чтобы это работало. В противном случае вам нужно будет прикрепить обработчик событий DOMContentLoaded к документу и поместить туда код, например:

function helloMessage() {
  document.getElementById("id").innerHTML = "Hello";
}

document.addEventListener('DOMContentLoaded', function() {
  helloMessage();
});

<h3 id="id"></h3>

Наконец, обратите внимание, что в этом вопросе нет ничего общего с jQuery, несмотря на заголовок. Если вы хотите сделать это в jQuery, это будет выглядеть так:

function helloMessage() {
  $('#id').html('Hello');
}

jQuery(($) => {
  helloMessage();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="id"></h3>

Answer 2

Ответ Рори соответствует вашим потребностям. Если вы хотите использовать jQuery для своего кода, вы также можете использовать:

// This code means the page is loaded
$(function() {
  // Modify the text of the H3
  $('h3#id').text('Hello ');
});