关闭

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

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

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

关闭

浏览器是如何将标签转成 DOM ?

进入主话题之前,先罗列一下浏览器的主要构成:用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分;浏览器引擎- 用来查询及操作渲染引擎的接口

使用Map标签指定点击区域时的兼容性问题

因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。当然,label和map中的用法也不同,不论如何,引以为戒

META标签的设置

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

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

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

video标签的属性

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

html5语义化标签

在html5没出来之前,一直用html的div+css进行布局,通篇div+span,确实不优雅。html5新增了很多语义化的标签,帮助我们写出更优雅的html结构。<article>可以是页面任何独立的内容区域

关于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

html富文本的 ↵ 转为</br>标签

‘↵’是回车符/n,这段内容是通过textarea人为编辑,提交给后端保存的。编辑框中可以识别的字符,在普通的标签里面没办法识别到,所以要转换成可以识别的<br/>

用css设置a标签无效,让链接跳转失效

这个代码有个坑,就是如果a标签里面放了一个图片,然后给a标签设置这个样式,这个时候是不起效果的,只能在a标签外面包一个div,然后给div设置这个样式

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

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

点击更多...

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