我如何才能实现以下目标。
document.all.regTitle.innerHTML = 'Hello World';
使用jQuery,其中regTitle
是我的div ID?
已经有一些答案给出了如何改变元素的内部HTML。
但我建议,你应该使用一些动画,比如淡出/淡入来改变HTML,这样可以使改变后的HTML有很好的效果,而不是瞬间改变内部HTML。
$('#regTitle').fadeOut(500, function() {
$(this).html('Hello World!').fadeIn(500);
});
如果你有很多函数需要这样做,那么你可以调用改变内部Html的普通函数。
function changeInnerHtml(elementPath, newText){
$(elementPath).fadeOut(500, function() {
$(this).html(newText).fadeIn(500);
});
}
回答:
$("#regTitle").html('Hello World');
解释:
$
相当于jQuery
。
两者在jQuery库中代表同一个对象。
括号内的"#regTitle"
叫做选择器,jQuery库用来识别你要应用代码的html DOM(Document Object Model)元素。
在 "regTitle "之前的 "#"是告诉jQuery,"regTitle "是DOM里面一个元素的id。
从那里开始,点号被用来调用html函数,它用你放在括号里的任何参数来替换内部的html,在这种情况下是'Hello World'
。
实例 <!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
$( document ).ready(function() {
$('.msg').html('hello world');
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="msg"></div>
</body>
</html>
<!--结束片段-->
$("#regTitle")[0].innerHTML = 'Hello World';
只是想补充一些性能方面的见解。
几年前,我有一个项目,我们在尝试将一个大的HTML /文本设置为各种HTML元素时遇到了问题。
看起来,"重新创建"。 元素并将其注入到DOM中比任何建议的更新DOM内容的方法都要快。
所以,类似于
-- begin snippet: js hide: false console: truefalse -->
var text = "very big content";
$("#regTitle").remove();
$("<div id='regTitle'>" + text + "</div>").appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--结束片段-->。
应该能让你获得更好的性能。 我最近还没有尝试测量(现在的浏览器应该很聪明),但如果你'正在寻找性能,它可能会有帮助。
缺点是,你将需要做更多的工作来保持DOM和你的脚本中的引用指向正确的对象。