js document 的replace方法

陈丽莉

本帖最后由杨杨于 2013-3-11 08:26 编辑

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="国庆六十周年_1" id="tid_1" >
<input type="text" name="tname" value="国庆六十周年_2" id="tid_2" >
<input type="text" name="tname" value="国庆六十周年_3" id="tid_3" >
<input type="button" name="ok" value="保存1"/>
</form>
您喜欢的城市:
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重庆</li>
</ul>
您喜欢的游戏:
<ul>
<li id="fk" value="fangkong">反恐<p>xxx</p></li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq" value="chuanqi">传奇</li>
</ul>
</body>
<script language="JavaScript">
// //获取bj节点
// var bjElement=document.getElementById("bj");
// //获取fk节点
// var fkElement=document.getElementById("fk");
// //获取北京节点父节点
// var bjParentElement=bjElement.parentElement;
// //当点击北京节点时候替换子节点
// //替换
// bjElement.onclick=function(){bjParentElement.replaceChild(fkElement,bjElement);};
// //var oldElement=bjParentElement.replaceChild(fkElement,bjElement);
// //var oldElement=bjParentElement.replaceChild(fkElement,bjElement);
// alert(oldElement.getAttribute("value"));
document.getElementById("bj").onclick=function(){
//获取北京节点
var bjElement=document.getElementById("bj");
//获取反恐节点
var fkElement=document.getElementById("fk");
//获取北京节点的父节点
var bjParentElement=bjElement.parentNode;
//替换
var oldElement=bjParentElement.replaceChild(fkElement,bjElement);
//测试
alert(oldElement.getAttribute("value"));
}
</script>
</html>

复制代码

上述代码当单击北京时候被替换成反恐
上面注释的代码在ie下测试没问题
但是在火狐下面不行
没注释的在哪里都行
求解释

罗玉宁 · 罗玉宁

没有问题啊！
我用了注释的代码在火狐下测试没有问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="国庆六十周年_1" id="tid_1" >
<input type="text" name="tname" value="国庆六十周年_2" id="tid_2" >
<input type="text" name="tname" value="国庆六十周年_3" id="tid_3" >
<input type="button" name="ok" value="保存1"/>
</form>
您喜欢的城市:
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重庆</li>
</ul>
您喜欢的游戏:
<ul>
<li id="fk" value="fangkong">反恐<p>xxx</p></li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq" value="chuanqi">传奇</li>
</ul>
</body>
<script language="JavaScript">
// //获取bj节点
var bjElement=document.getElementById("bj");
// //获取fk节点
var fkElement=document.getElementById("fk");
// //获取北京节点父节点
var bjParentElement=bjElement.parentElement;
// //当点击北京节点时候替换子节点
// //替换
bjElement.onclick=function(){bjParentElement.replaceChild(fkElement,bjElement);};
</script>
</html>

复制代码

罗玉宁 · 罗玉宁

当然你要达到和ie下一样的效果的话还可以稍微改一下如下：

bjElement.onclick=function(){
var oldElement=bjParentElement.replaceChild(fkElement,bjElement);
alert(oldElement.getAttribute("value"));
};

复制代码

陈丽莉 · 陈丽莉

如果答案满意，请回复告知，并将帖子分类改成【已解决】。

杨杨 · 杨杨

怪了我测试的就不行呢

帐号		自动登录	找回密码
密码			加入黑马

js document 的replace方法

评分

4 个回复

评分

点评

黑马骑士勋章