怎么在jquery中在div中加一段html
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么在jquery中在div中加一段html相关的知识，希望对你有一定的参考价值。
参考技术A <style>.box1
width: 600px;
height:300px;
border: 6px solid #bb0000;
h1
border-bottom: 1px solid green;
</style>
<div class="box1">
点击改变内容
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$('.box1').click(function(event)
$(this).html('=========================================================这是新添贴==================================');
);
</script>
在 div 中加载 html 页面
【中文标题】在 div 中加载 html 页面【英文标题】：loading html page inside div 【发布时间】：2010-08-25 09:14:27 【问题描述】：如何。它正在加载“对象”标签，但我认为这不是一个好方法。它不是外部文件。道场适合这个吗？
【问题讨论】：
不使用 iframe :) 【参考方案1】：使用 jquery
$("#mydiv").load("myexternalfile.html");
【讨论】：
这是否会过滤掉不需要的元素，例如HTML、HEAD 和 BODY？如果是这样，那么这将是一个非常优雅的解决方案。比尝试手动插入要好得多。
不，它会从myexternalfile.html 中提取所有html，然后将其放入div。【参考方案2】：
我不完全确定您在寻找什么，但如果您希望在另一个 HTML 文档中显示一个 HTML 文档，那么我认为唯一的方法是使用 iframe。查看本教程：http://www.designplace.org/tutorials.php?page=1&c_id=1
也许您可以加载 HTML 文档并去掉 HEAD 并包装 BODY 元素，然后将代码插入到 DIV 元素中。
编辑：啊，不是你说的iframes。那么，我建议后者。 ^^
【讨论】：
【参考方案3】：如果没有其他需要框架功能的任务，没有理由只使用 jQuery 将内容加载到您的页面（例如，仅加载到一个 div）:)
这应该使用 AJAX 基础知识来完成。 看看这个：http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
【讨论】：
【参考方案4】：这也有效...使用 dojo...
<script type="text/javascript">
var url = dojo.moduleUrl("dijit.form", "help.html");
dojo.xhrGet(
url: url,
load: function(html)
dojo.byId("mycontent").innerHTML = html;
);
</script>
<div id="mycontent">
</div>
更新：
在 Dojo 1.7+ 中，使用 require.toUrl 代替 dojo.moduleUrl
【讨论】：
【参考方案5】：你必须使用带有 load() 方法的 jQuery。 这里关于加载方法的jQuery参考：http://api.jquery.com/load/
【讨论】：
【参考方案6】：您仍然可以使用 jquery 通过 ajax 调用加载内容。获取结果并删除<body> 及其前面的所有内容，以及</body> 及其后面的所有内容。您可以使用正则表达式来确保包含 body 标记的任何属性。
然后你就剩下原始的正文 html，你可以使用 jQuery 将它添加到 div 中。
jQuery.ajax(
url: 'page.html',
success: function(data, textStatus, XMLHttpRequest)
data = data.replace(/.*<body.*?>/gi,'');
data = data.replace(/</body>.*/gi,'');
jQuery('#myDiv').html(data);
);
我的正则表达式有点生疏，所以你可能需要调整它:)
【讨论】：
以上是关于怎么在jquery中在div中加一段html的主要内容，如果未能解决你的问题，请参考以下文章