您的位置：首页 > Web前端 > JQuery

jQuery执行脚本，在指定的div添加（附加）html代码

2015-09-14 15:22 696 查看

jQuery中需要执行指定的js代码方法

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<div id="dictionary">
</div>
<div class="letters">
<div class="letter" id="letter-a">
<h3><a href="entries-a.html">A</a></h3>
</div>
<div class="letter" id="letter-b">
<h3><a href="entries-a.html">B</a></h3>
</div>
<div class="letter" id="letter-c">
<h3><a href="entries-a.html">C</a></h3>
</div>
<div class="letter" id="letter-d">
<h3><a href="entries-a.html">D</a></h3>
</div>
<!-- and so on -->
</div>

</head>
<body >
<script>
$(document).ready(function() {
$('#letter-c a').click(function(event) {
event.preventDefault();
$.getScript('c.js');
});
});
</script>
</body>
</html>

将写好的c.js文件放置同一个目录下面

var entries = [
{
"term": "CALAMITY",
"part": "n.",
"definition": "A more than commonly plain and..."
},
{
"term": "CANNIBAL",
"part": "n.",
"definition": "A gastronome of the old school who..."
},
{
"term": "CHILDHOOD",
"part": "n.",
"definition": "The period of human life intermediate..."
}
//省略的内容
];

var html = '';

$.each(entries, function() {
html += '<div class="entry">';
html += '<h3 class="term">' + this.term + '</h3>';
html += '<div class="part">' + this.part + '</div>';
html += '<div class="definition">' + this.definition + '</div>';
html += '</div>';
});

$('#dictionary').html(html);
//$('#dictionary').append(html);

这里的$('#dictionary').html(html);可以直接将需要的代码放入到指定的div内 (<div id="dictionary">)

也可以通过$('#dictionary').append(html);将代码附加到指定的div内 (<div id="dictionary">)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航