Ext的Dom操作——增加节点

最新推荐文章于 2019-10-24 20:47:30 发布

代码摆渡人

最新推荐文章于 2019-10-24 20:47:30 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签： ext class html stylesheet path div

本文链接：https://blog.youkuaiyun.com/huang_xw/article/details/7475379

本文通过实例展示了如何使用 ExtJS 和 Ext.DomHelper 进行DOM操作，包括添加子元素和同级元素等，提供了多种方法实现网页元素的动态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>My JSP 'index.jsp' starting page</title>
		<link rel="stylesheet" type="text/css" href="ext3/resources/css/ext-all.css">
		<script type="text/javascript" src="<%=basePath%>/ext3/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="<%=basePath%>/ext3/ext-all.js"></script>
		<script type="text/javascript" src="<%=path%>/ext3/ext-lang-zh_CN.js"></script>
		<script type="text/javascript" src="<%=path%>/js/other/element/domappend.js"></script>	
		<style type="text/css">
			.soncls {
				margin-left: 50px;
				background-color: yellow;
			}
		</style>
	</head>
	<div id="elid1" class="soncls">应用appendChild添加子元素!!!</div>
	<div id="elid2" class="soncls">应用appendTo添加子元素!!!</div>
	<body>
		<div id="elbefore" class="brocls">Div前面</div>
		<div id="elid" class="brocls">
			<div class="soncls">子元素1</div>
			<div class="soncls">子元素2</div>
			<div class="soncls">子元素3</div>
		</div>
		<div id="elafter" class="brocls">Div后面</div>
	</body>
</html>

Ext.onReady(function(){
	var el3 = {
		tag : 'div',
		id  : 'elid3',
		cls : 'soncls',
		html : '应用DomHelper的append()添加子元素!!!'
	}
	var el4 = {
		tag : 'div',
		id  : 'elid4',
		cls : 'soncls',
		html : '应用DomHelper的insertFirst()添加子元素!!!'
	}
	var el5 = {
		tag : 'div',
		id  : 'elid5',
		cls : 'brocls',
		html : '应用DomHelper的insertBefore()添加同级元素!!!'
	}
	var el6 = {
		tag : 'div',
		id  : 'elid6',
		cls : 'brocls',
		html : '应用DomHelper的insertAfter()添加同级元素!!!'
	}
	var el7 = {
		tag : 'div',
		id  : 'elid7',
		cls : 'brocls',
		html : '应用DomHelper的insertSibling()添加同级元素!!!'
	}

	// 增加子元素的方法
	Ext.fly('elid').appendChild(Ext.get('elid1'));
	Ext.fly('elid2').appendTo(elid);
	Ext.DomHelper.append('elid', el3);
	Ext.DomHelper.insertFirst('elid', el4);

	// 增加同级元素的方法
	Ext.DomHelper.insertBefore('elid', el5);
	Ext.DomHelper.insertAfter('elid', el6);
	Ext.fly('elid').insertSibling(el7);	// 将会插在元素elid前
});