为了账号安全,请及时绑定邮箱和手机立即绑定

请问该怎么用js(不是JQ)给标签外加一个div标签?

请问该怎么用js(不是JQ)给标签外加一个div标签?

慕侠2389804 2022-05-19 17:15:10
比如 <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>高手来看看
查看完整描述

3 回答

?
Smart猫小萌

TA贡献1911条经验 获得超7个赞

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



查看完整回答
反对 回复 2022-05-23
?
神不在的星期二

TA贡献1963条经验 获得超6个赞

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

查看完整回答
反对 回复 2022-05-23
?
慕无忌1623718

TA贡献1744条经验 获得超4个赞

/**
* 给定标签添加外标签
* @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};



查看完整回答
反对 回复 2022-05-23
  • 3 回答
  • 0 关注
  • 315 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信