<!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>
分享到:
相关推荐
JS DOM动态创建表格 行 列
使用JavaScript和DOM动态创建表格
dom动态生成使用XML DOM生成XML.pdf
JavaScript 转换字符串为 DOM 对象(字符串动态创建 DOM) 在 JavaScript 中,动态创建标准的 DOM 对象通常使用 `var obj = document.createElement('div');`,然后再给 `obj` 设置一些属性。但是,在实际使用过程...
教你javascript克隆dom,浅复制dom,深复制dom
它使用DOM 1的方法由JavaScript动态创建一个HTML表格。它创建一个由四个包含文本内容的单元格组成的小表格。单元格的文字内容是:“单元格是第y行第x列”,表示单元格在表格中的行数和列数。 代码如下:<ht
主要介绍了JS动态创建DOM元素的方法,涉及javascript动态创建DOM元素及DOM元素事件绑定与删除的相关技巧,需要的朋友可以参考下
web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定,这样才能解决问题的哦!
js动态创建表格,利用dom技术动态输入行列来创建表格
DOM解析XML 创建XML
主要介绍了javascript实现dom动态创建省市纵向列表菜单的方法,可实现省市列表菜单效果,涉及javascript鼠标事件及页面处理json数据的技巧,需要的朋友可以参考下
js动态创建table点击按钮dom table tr添加操作
动态操作dom方法文/1、document.createElement() 动态创建一个元素标签 //2、appendChild:把创建的标签添加到容器的末尾 // 容器.appendChild(newEle) //3、insertBefore:把创建的标签增加到容器中某一个标签的...
iframe自适应高度(DOM动态操作)
动态创建html内容时所用的W3C DOM属性和方法
节点操作基础知识回顾,需要dom操作的朋友可以参考下。
一个用dom4j创建xml文件的例子,该xml文件是多层节点的例子
DOM动态操作网页效果.xmind
删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点...