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"});//调用
摄图网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);
}