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

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

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

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

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成,但当我们做在线编辑器、整个 UI 都被自定义实现时,如何解决不同域问题并实现页面中图片资源的安全下载呢?本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

META标签的设置

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<script>标签的属性

src定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。type该属性定义script元素包含或src引用的脚本语言。

小程序如何写动态标签

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

什么是网页标签?

网页标签即HTML标签是网页浏览器识别符,是浏览器程序默认系统默认许可标签。HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

HTML中的target(_self,_blank)用法总结

最近一个项目,多次遇到target=\\\'_self\\\', target=\\\'_blank\\\'的用法, 再次总结一下:<a>标签;<form>标签;window.open;target的所有取值以及它们的含义:

总结那些有默认margin,padding值的html标签

h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值。dl标签:有默认margin(top,bottom且相同)值,没有默认padding值。ol,ul标签:有默认margin-(top,bottom且相同)值,有默认padding-left值

关于v-if和v-for不能一起使用在同一个标签上

遍历object的所有value(即li中的v-for),当拿到testData的第一个元素TESTOBJECT时,执行div中的v-for,此时的item对应T E S T O B J E C T这10个元素,于是循环10次,每一次都判断当前元素是否是array,很显然每次判断都是object

video标签的属性

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

HTML5的<progress>标签怎么用?

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

点击更多...

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