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

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

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

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

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

video标签的属性

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

html里a标签中href调用js的几种方法

这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

HTML5的<progress>标签怎么用?

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

META标签的设置

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

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

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

HTML的<Object>标签怎么用?

<object>标签是一个HTML标签,用于在网页中显示音频,视频,图像,PDF和Flash等多媒体;它通常用于嵌入由浏览器插件处理的Flash页面元素,如Flash和Java项目。它还可以用于在HTML页面内显示另一个网页。

web标签语义化的理解_web语义化是什么意思

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容

XPath当匹配标签判断text()判断内容失败的问题及解决

在爬取网站的时候我使用XPath去抓取网页上的内容,XPath表达式来精准获取需要的标签内容。当我对如下一段html代码编写XPath表达式抓取的时候出现了问题,代码如下。片名两个字中间有七个空格,我想要获取<dd></dd>中的内容。

a标签中防止跳转的href=javascript:;、void(0);等都是什么意思

a标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL(路径),包括片段标识符和 JavaScript 代码段。javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行

点击更多...

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