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","

动态添加的div

",{"id":"newDiv"});//调用

摄图网https://www.wode007.com/sites/73204.html

VJ师网https://www.wode007.com/sites/73287.html

四：动态添加元素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);

}