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

更新日期: 2018-12-06阅读量: 16264标签: 标签

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

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

JSTL学习总结

在mvnrepository中,直接搜索jstl,,找到下载量最高的,下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展,使用需导jar包

html中meta标签及Keywords

关键字 meta(标签)及 Keywords(关键词),曾经在网页中很重要的,但现在已经被很多搜索引擎完全忽略。但是,如果加上这个标签也对网页的综合表现没有坏处,不过,如果使用不恰当的话,对网页非但没有好处

Html头部meta标签

meta元素有4个属性:name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息,通过http-equiv属性设置http请求指令,通过charset设置页面的字符编码

HTML中<base>标签的正确使用

<base> 标签必须位于 <head> 元素内部,在一个文档中,最多能使用一个 <base> 标签,使用了<base>标签的链接后,其他链接必须在<base>标签的链接里面,不然将无法找到。

html5新媒体播放器标签embed、object

是为了兼容不同浏览器,IE只支持对Object的解析;火狐,谷歌,Safari只支持对Embed的解析。注意:使用<object>+<embed>是为了更好的兼容性,如果场景允许,推荐使用<object>。

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

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

深入理解Video标签

目前主流浏览器加强了对自动播放策略(Autoplay)的限制:浏览器在没有交互操作之前不允许有声音的媒体文件自动播放。 而且各个浏览器关于自动播放策略有不同的实现。

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

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

META标签的设置

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

<a>标签中href=javascript:与href=#

将href=#是指联接到当前页面,其实是无意义的,页面也不会刷新。这是一个锚链接。在制作网页时html语言里的参数,用于指定链接的url ####就是本页链接,href=地址,就是链接到地址 链接本页面 默认本页,不弹出新窗口,空连接时,如果去掉#

点击更多...

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