如题所述
document.getElementById("div_id").innerHTML = "你想往div里插入的html代码";
//如果想追加，可以这样
//先保存div中原来的html
var html = document.getElementById("div_id").innerHTML;
//再跟你想追加的代码加到一起插入div中
document.getElementById("div_id").innerHTML = html + "你想往div里追加的html代码";
<!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">)
