在页面上找不到我的 jQuery？它是否在其他元素后面显示加载的数据？

Question

所以我的基本目标是简单地使用jQuery样式的函数来显示单词hello。我想要这个，这样以后我就可以个性化地打招呼了。"你好"+$用户名。我已附上我的代码。

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

我的.js文件看起来像这样，

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

我的页面没有给我任何错误，但当我试图找到元素h3时，它只是在页面上给我一个没有"你好"消息的区域？这是因为我的"你好"在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

h3元素上没有onload属性。如果您想在页面加载时运行该函数，请直接调用它：

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

Rory的回答符合您的需要。如果你想对你的代码使用jQuery，你也可以使用：

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