本文详细介绍了JavaScript中利用DOM操作实现元素插入与修改的方法，并通过jQuery库演示了简化这些操作的过程。包括如何在特定索引处添加内容、使用jQuery进行元素追加、前置、插入、替换等技巧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>append</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function() {
$('div').append(function(index, html) {
//index即选择器的索引
if(index == 1) {
//返回的内容即是在相应索引下的对象内部（最后）添加的内容
return '<strong>world</strong>';
}
if(index == 3) {
return 'morning';
}
});
//在每个匹配的选择器内部（最后）添加内容
$('.next').append('<strong>morning</strong>.');
//把每个匹配的元素添加的每个选择器内部
$('.foo').appendTo('p');
//还有一些相近的方法prependTo, insertBefore, insertAfter, 和 replaceAll，使用方式都差不多
});
</script>
</head>
<body>
<div style="border: 1px solid red;width: 80px;height: 30px;">hello</div>
<div style="border: 1px solid green;width: 80px;height: 30px;"></div>
<div style="border: 1px solid red;width: 80px;height: 30px;">good</div>
<div style="border: 1px solid green;width: 80px;height: 30px;"></div>
<div class="next" style="border: 1px solid red;height: 30px;">He loafed away the whole </div>
<div class="next" style="border: 1px solid red;height: 30px;">He loafed away the whole </div>
<div class="foo">Hello</div>
<div class="foo">Hey</div>
<p>I would like to say: </p>
<p>I would like to say: </p>
</body>
</html>
扫一扫
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
