Question

怎么用js（不是JQ）给标签外加一个div标签

比如 <table border="1" width="100%" id="table1">
<tr>
<td>　</td>
<td>　</td>
</tr>
<tr>
<td>　</td>
<td>　</td>
</tr>
</table>
我想把它变成
<div>
<table border="1" width="100%" id="table1">
<tr>
<td>　</td>
<td>　</td>
</tr>
<tr>
<td>　</td>
<td>　</td>
</tr>
</table></div>

高手来看看

Answer 1

/**
* 给定标签添加外标签
* @param {object | string} obj 一个标签元素，或者元素的id值
* @param {string} tag 外标签的名称，可以带上id值class值
*/
function setParent(obj,tag){
obj = typeof obj === "string" ? document.getElementById(obj) : obj;
//判断obj是否为有效元素对象
if(obj && obj.nodeType){
if(obj.nodeType !== 1){
alert("无效的元素对象！");
return false;
}
}else{
alert("无效的元素对象！");
return false;
}
//如果没有设置tag，或者省略了标签名称，则默认为div
tag = tag ? (/^(#|\.)/gim.test(tag) ? ("div"+tag) : tag) : "div";

var id = "",
cname = "",
len = tag.length,
i = 0,
tn = "",
isT = true,
str = "",
relTag = "";//用来保存标签

//获取id值，获取class值,这一部分参考zencoding的写法
while(i<len){
str = tag.charAt(i);
switch(str){
case "#"://id
id = tag.substring(i+1).match(/^[\w\-:\$]+/i);
id = id ? id[0] : "";
i += id.length + 1;
isT = false;
break;
case "."://class
tn = tag.substring(i+1).match(/^[\w\-:\$]+/i);
tn = tn ? tn[0] : "";
i += tn.length + 1;
cname += " " + tn;
isT = false;
break;
default:
if(isT){
relTag += str;
}
i++;
}

}
//生成节点
tag = document.createElement(relTag);
tag.setAttribute("id",id);
tag.className = cname;
//移动替换节点
tag.appendChild(obj.cloneNode(true));
obj.parentNode.replaceChild(tag,obj);
return obj;
}
window.onload = function(){
//用法1：movediv为页面上的某个标签的id值，#my.base.case省略标签符号则默认标签为div
setParent("movediv","#my.base.case");
//用法2：可省略第二个参数值，默认外标签为div
setParent("movediv");
//用法3：movediv为页面上的某个标签的id值，h3#my.base.case表示外标签为h3，其id值为my，其class值为base case
setParent("movediv","h3#my.base.case");
//用法4：传入标签元素，其余用法类似上面的
setParent(document.getElementById("movediv"),"#my.base.case");
}

此函数的压缩版本如下(使用的是google的Closure Compiler)：
function setParent2(b,a){if((b="string"===typeof b?document.getElementById(b):b)&&b.nodeType){if(1!==b.nodeType)return alert("\u65e0\u6548\u7684\u5143\u7d20\u5bf9\u8c61\uff01"),!1}else return alert("\u65e0\u6548\u7684\u5143\u7d20\u5bf9\u8c61\uff01"),!1;for(var a=a?/^(#|\.)/gim.test(a)?"div"+a:a:"div",e="",f="",i=a.length,c=0,d="",d=!0,g="",h="";c<i;)switch(g=a.charAt(c),g){case "#":e=(e=a.substring(c+1).match(/^[\w\-:\$]+/i))?e[0]:"";c+=e.length+1;d=!1;break;case ".":d=(d=a.substring(c+1).match(/^[\w\-:\$]+/i))?
d[0]:"";c+=d.length+1;f+=" "+d;d=!1;break;default:d&&(h+=g),c++}a=document.createElement(h);a.setAttribute("id",e);a.className=f;a.appendChild(b.cloneNode(!0));b.parentNode.replaceChild(a,b);return b};

Answer 2

纯 JS

function createDiv() {
var target = document.getElementById("table1");
var newDiv = document.createElement("div");
newDiv.appendChild(target.cloneNode(true));
target.parentNode.replaceChild(newDiv, target);
}

createDiv();​

Answer 3

function creatediv()
{
var tatd=document.getElementById("table1");
var newDiv=document.createElement("div");
newDiv.appendChild(tatd);
}