js动态添加html标签和属性_手动插入meta、script、div、img等标签

web网页是由 html标签一层层组成的，js也可以动态添加对应的标签，比如mate标签、script标签、div标签、img标签等，动态创建的方法基本都差不多，下面将简单介绍下如何实现

一：手动添加mate标签

function addMeta(name,content){//手动添加mate标签
	let meta = document.createElement('meta');
    meta.content=content;
    meta.name=name;
    document.getElementsByTagName('head')[0].appendChild(meta);
}

二：手动添加script标签

function addScript(src){//手动添加script标签
	let script=document.createElement("script");
    script.type="text/javascript";
    script.src= src;
    document.getElementsByTagName('head')[0].appendChild(script);
}

三：动态添加元素div

function addDiv(pid,html,attr){//动态添加元素div
	 attr=attr || {};
　　　　let parent = document.getElementById(pid);
　　　　let div = document.createElement("div");//添加 div
	 for(let i in attr){//设置 div属性
	 	div.setAttribute(i,attr[i]);
	 }　
　　　　div.innerHTML = html;
　　　　parent.appendChild(div);
}
addDiv("pid","<p>动态添加的div</p>",{"id":"newDiv"});//调用

四：动态添加元素img标签

function addImg(pid,src,attr){//动态添加元素img标签
	attr=attr || {};
　　　let parent = document.getElementById(pid);
　　　let img = document.createElement("img");//添加 div
　　　for(let i in attr){//设置 div属性
	 	img.setAttribute(i,attr[i]);
	}
　　　img.src = src;
　　　parent.appendChild(img);
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1508