如何用js代码将某个html标签重写

一个html页面。里面有一个：div标签。
<div id="div1" onclick="func()" >我是一个div</div>请问，如何使用js代码，实现点击：“我是一个div”后，整个div标签变为以下代码：
<img id="img1" src="" />请问这个js代码如何写呢？请写出具体代码。谢谢。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

感觉自己在给自己增加负担~~
你外面添加一个div或者什么的然后替换其innerHTML什么的不就可以了么
outerHTML
写个ff的扩展就可以了~~。
只是你不觉得这个很麻烦吗？
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="div1" onclick="func()" >我是一个div</div>
<script>
$("#div1").replaceWith('<img id="img1" src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif" />');
</script>
</body>
</html>
清洁工大叔忘了 function func(){}了
来个纯js    <script type="text/javascript">
        function func() {
            var div = document.getElementById("div1");
            div.parentNode.removeChild(div);
            var img = document.createElement("img");
            img.id = "img1";
            img.src = "";
            document.body.appendChild(img);
        }
    </script></head>
<body>
    <div id="div1" style="background-color: lightgreen" onclick="func()">
        我是一个div</div>
</body>
这个方法不可行
考虑外层dom中有数个dom元素
而这个div在中间

如果没有这么多的dom元素的话直接div.parentNode.innerHTML = '';就可以了对吧大叔的方法可行。如果楼主愿意使用jQuery的话。
期待简单的、纯的js代码，几句，来搞定此问题。js代码应该可以具备重写某个指定html标签的功能啊。
var div=document.getElementById("div1");
var img=document.createElement("img");
img.id="img1";img.src="";
var par=div.parentNode;
par.insertBefore(img,div);
div.removeNode(true);
原生JS代码，未经测试...
呼，出去了一趟，多dom也好解决啊，替换就完了    <script type="text/javascript">
        function func() {
            var div = document.getElementById("div1");
            var img = document.createElement("img");
            img.id = "img1";
            img.src = "";            document.body.replaceChild(img,div);
        }
    </script></head>
<body>
    <div id="div2" style="background-color: red">
        我是一个div</div>
    <div id="div1" style="background-color: lightgreen" onclick="func()">
        我是一个div</div>
    <div id="div3" style="background-color: blue">
        我是一个div</div>
</body>
按楼上朋友的代码，完整地写了一下代码。仍不成功。大家拷贝下来一测便知。请问如何解决，应该是很接近成功了。<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function func()
{
var div1 = document.getElementById("div1");
div1.parentNode.removeChild(div1);
var img = document.createElement("img");
img.id = "img1";
img.src = "http://www.baidu.com/img/baidu_logo.gif";
document.body.replaceChild(img,div1);
}
</script>
</head>
<body>
<div id="div1" style="background-color: lightgreen" onclick="func()">我是一个div1</div>
<div id="div2" style="background-color: lightgreen" >我是一个div2</div>
</body>
</html>
你们这些银啊，尽然不测试一下我的代码，悲剧，借11楼代码壳子用一下
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function func(div)
{
var img=document.createElement("img");
img.id="img1";img.src="http://www.baidu.com/img/baidu_logo.gif";
var par=div.parentNode;
par.insertBefore(img,div);
div.removeNode(true);
}
</script>
</head>
<body>
<div id="div1" style="background-color: lightgreen" onclick="func(this)">我是一个div1</div>
<div id="div2" style="background-color: lightgreen" onclick="func(this)">我是一个div2</div>
</body>
</html>
你多了div1.parentNode.removeChild(div1);
我第二个代码删了这个的
多谢楼上的各位朋友。csdn的朋友人真好，技术也好。