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

时间: 2018-12-06阅读: 13026标签: 标签

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);
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1508

关闭

HTML5的<progress>标签怎么用?

<progress> 标签表示任务的进度(进程),例:可定义完成多少工作,还有多少工作可以下载等等。该标签可与JavaScript结合使用,来显示任务的进度,创建动态的进度条。注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。

head里两个重要标签base和meta

<base>我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签,分为3类:具有charset属性的meta 、带有http-equiv 属性的 meta

小程序如何写动态标签

动态配置标签的好处一是所有逻辑在JS端控制,二是使得我们的模板非常规范,方便后续维护更新,碎片模板可以很好的控制,三是我们可以根据使用场景很方便的配置props的属性

如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

本教程的这一部分内容是关于 JavaScript 语言本身的。但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert)

HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”

这里我们有一个指向恶意网站的 href 属性,并以 _blank 属性为 target,使其在新标签页中打开。该流程看起来如此简单明了,用户在这里可能面临的安全风险是什么?

HTML <link> 标签 PC移动网站适配

在pc版网页上,添加指向对应移动版网址的特殊链接rel=alternate标记,这有助于百度发现网站的移动版网页所在的位置;同时在移动版网页上,添加指向对应pc版网址的链接rel=canonical标记。

HTML5新增和废弃的标签

以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定了。

vue自定义标签和单页面多路由实现

比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue:

video标签的属性

HTML5是下一代HTML,新增了许多新的标签,这些标签实现了许多新的功能。并且还减少了对外部插件的要求同时也可以更好的处理错误。比如HTML5中的video标签就可以很好的实现了在页面上播放视频的效果。

html中link标签

link元素规定了外部资源与当前文档的关系。常用于链接样式表,创建网站图标,预加载资源等。预加载用于前端界面性能优化,rel 的属性值可以为preload、prefetch、dns-prefetch。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!