<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
<!--
function makeNode(str)
{
var newParagraph = document.createElement('p');
var newText = document.createTextNode(str);
newParagraph.appendChild(newText);
return newParagraph;
}
function appendBefore(nodeId,str)
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
if(node.parentNode)
node.parentNode.insertBefore(newNode,node);
}
function inserWithin(nodeId,str)
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
node.appendChild(newNode);
}
function appendAfter(nodeId,str)
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
if(node.parentNode)
{
if(node.nextSibling)
node.parentNode.insertBefore(newNode, node.nextSibling);
else
node.parentNode.appendChild(newNode);
}
}
//-->
</script>
</head>
<body>
<h1>DOM 插入 与 增加</h1>
<hr />
<div style="background-color:#66ff00;">
<div id="innerDiv" style ="background-color:#ffcc00;"></div>
</div>
<hr />
<form id= "form1" name= "form1" action="#" method="get">
<input type="text" id ="field1" name= "field1" />
<input type="button" value="前插入" onclick="appendBefore('innerDiv',document.form1.field1.value);" />
<input type="button" value="中插入" onclick="inserWithin('innerDiv',document.form1.field1.value);" />
<input type="button" value="后插入" onclick="appendAfter('innerDiv',document.form1.field1.value);" />
</form>
</body>
</html>
分享到：
相关推荐
DOM节点克隆是JavaScript中一个重要的概念，它允许我们创建现有DOM节点的副本，这对于数据备份、重复元素或者创建复杂动态效果非常有用。本文将详细介绍JavaScript中的DOM节点克隆，包括浅复制和深复制的区别。 一...
创建DOM节点通常是指在JavaScript代码中动态生成HTML元素，并将其添加到DOM树中，从而改变网页的结构和显示效果。在jQuery中，这可以通过工厂函数$()来实现。 工厂函数$()允许我们基于传入的HTML标记字符串创建一个...
3. **结点操作**：DOM解析器支持对XML节点的各种操作，如创建、删除、复制和移动。例如，创建一个新的元素并添加到文档中： ```csharp XmlElement newElement = doc.CreateElement("newElement"); doc....
DOM结构的动态改变是通过创建节点对象并进行一系列操作来完成的。例如： - `document.createElement(tagName)`：创建一个新的元素节点。 - `fatherNode.appendChild(childNode)`：将一个新创建的节点或已存在的节点...
总的来说，"结点可以拖动，右键弹出操作菜单的树(dhtmlxtree改造)"是一个增强用户交互体验的网页开发实践，涉及到了JavaScript事件处理、DOM操作以及UI交互设计等多个方面。通过这个改造，用户不仅可以更自由地组织...
综上所述，Java中的动态插入和删除节点主要通过前端技术实现，尤其是利用jQuery库简化DOM操作。掌握这些技巧，可以让你构建出更加灵活和交互丰富的Web应用程序。在实际项目中，配合服务器端的Java代码，可以实现更...
通过DOM，程序和脚本可以动态地访问和更新文档的内容、结构以及样式。在Web开发中，掌握DOM的基本方法对于操作HTML文档结构是必不可少的。以下是根据文件提供的信息，总结出的DOM操作的一些基本知识点。 1. 直接...
第四个模块是JavaScript动态控制，主要指导学生如何使用JavaScript动态创建、修改界面结点和属性。第五个模块是JavaScript动画控制，包括标签、样式、动画等方面的内容。 通过这些模块的实验设计，学生可以快速掌握...
JavaScript是网页开发中最常用的语言，用于实现客户端的动态效果和交互。在本案例中，JS被用来创建和操作树形结构，并处理多选框的选中状态。 2. **多选框（Checkbox）** 多选框是HTML中的一个表单元素，让用户...
在JavaScript中，节点操作是DOM（Document Object Model）编程的核心部分，它允许我们对HTML文档进行动态修改，创建、删除或移动元素。这篇博客“js节点操作”可能深入探讨了如何利用JavaScript API来操纵DOM树。 ...
- **设置或获取结点关联的document对象** - 获取：`var doc = element.ownerDocument;` - 应用场景：访问文档的根节点和其他属性，如获取文档类型定义（DTD）信息。 10. **owningElement** - **获取HTML层次中...
1. **创建单链表**：在Vue中，这可能涉及到定义一个城市对象的组件，然后在组件实例化时动态创建链表节点。 2. **删除链表中的某个结点**：通过Vue的数据绑定和响应式系统，可以监听用户操作来删除特定的城市项。 3....
2. **JavaScript**：JavaScript提供了动态创建和修改DOM的能力，可以通过遍历数据结构生成HTML元素，实现可交互的树形结构。例如，可以使用jQuery的`.append()`方法添加节点。 3. **jQuery插件**：有许多jQuery插件...
我们通过DOM提供的各种方法可以动态地添加、删除和修改节点。 appendChild方法的使用语法非常简洁，只有一个参数，即要添加的子节点。例如： ```javascript element.appendChild(newNode); ``` 上述代码将newNode...
• 12.3.htm DOM结点属性 • 12.4.htm 文档树检测 • 12.5.htm 结点插入与追加 • 12.6.htm 结点复制 • 12.7.htm 结点删除与替换 • 12.8.htm 处理文本结点的方法...
2. **初始化过程**：组件在渲染完成后会执行初始化操作，如创建隐藏字段、绑定事件监听器等。 3. **延迟加载策略**：采用异步加载的方式，在用户实际需要时才加载数据，优化性能。 #### 五、兼容性与调试 - **IE6下...
• 12.3.htm DOM结点属性 • 12.4.htm 文档树检测 • 12.5.htm 结点插入与追加 • 12.6.htm 结点复制 • 12.7.htm 结点删除与替换 • 12.8.htm 处理文本结点的方法...
5. **修改结点属性**：用户可以改变图形的颜色、大小、标签等属性，JavaScript会实时更新对应的VML元素样式。 6. **保存和打开**：框图的数据结构可能被序列化为JSON或XML，然后通过Ajax或者Fetch API发送到服务器...