js 动态创建标记
innerHTML:一旦使用了这个属性,它的全部内容都要被替换掉。且不会返回任何对刚插入的内容的引用
与document.write()方法一样,innerHTML属性也是HTML专有属性,不能用于任何其他标记语言文档。
createElement方法(创建元素节点)
语法:document.createElement(nodeName)
document.createElement("p")
appendChild方法(成为文档中某个现有节点的子节点)
语法:parent.appendChild(child)
document.getElementById("testdiv").appendChild(document.createElement("p"));//新创建的p元素成为testdiv元素的一个子节点
createTextNode方法(创建元素节点)
语法document.createTextNode(text)
document.createTextNode("hello world");
DOM提供insertBefore()方法,这个方法将把一个新元素插入到一个现有元素前面,在调用此方法时,必须有三个参数:
①新元素:你想插入的元素(newElement)
②目标元素:你想把这个新元素插到哪个元素(targetElement)之前
③父元素:目标元素的父元素(parentElement)
语法:parentElement.insertBefore(newElement,targetElement)
在DOM里,元素节点的父元素必须是另一个元素节点(属性节点和文本节点的子元素不允许是元素节点)
不必搞清楚父元素是哪个,因为targetElement元素的parentNode属性值就是它。
var gallery=document.getElementById("imagegallery");
gallery.parentNode.insertBefore('placeholder,gallery');//将placeholder元素插入到imagegallery的前面去。
在DOM中不提佛那个insertAfter()方法,可以自己创建一个
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if (parent.lastChild==targetElement) {
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
使用insertAfter()方法
var gallery=document.getElementById("imagegallery");
把placeholder(这个变量对应着新创建出来的img元素)插入到gallery的后面:
insertAfter(placeholder,gallery);
js 动态创建标记的更多相关文章
- JavaScript dom 动态创建标记
此前的大多数DOM都是用来查找元素,getElementById和getElementsByTagName都可以方便快捷的找到文档中的某个或者某些特定的元素节点,这些元素随后可以用诸如setAttri ...
- js动态创建的select2标签样式加载不上解决办法
js动态创建的select2标签样式加载不上:调用select2的select2()函数来初始化一下: js抛出了Uncaught query function not defined for Sel ...
- js动态创建及移除div的方法
本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- 用JS动态创建登录表单,报了个小错误
后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...
- js动态创建样式: style 和 link
js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...
- UEditor js动态创建和textarea中渲染【原】
UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...
- JS动态创建Table,Tr,Td并赋值
JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...
- js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- js 动态创建变量
js 动态创建变量 CreationTime--2018年7月2日15点04分 Author:Marydon 1.实现方式 通过eval()实现 2.代码实现 /** * 声明一个函数 * @ex ...
随机推荐
- 进入BIOS的步骤
查看自己的BIOS版本 $ systeminfo 对号入座,电脑进入BIOS的两种实用方法
- Java 读写Properties配置文件【转】
1.Properties类与Properties配置文件 Properties类继承自Hashtable类并且实现了Map接口,也是使用一种键值对的形式来保存属性集.不过Properties有特殊的地 ...
- RTT之内存管理及异常中断
内存管理分静态内存管理和动态内存管理(根据大小又分2种) 静态内存管理:创建.删除.初始化.解绑.申请和释放.初始化内存池是属于静态内存管理,与创建内存池不同的是,此处内存池对象所使用的内存空间是由用 ...
- 牛客网Java刷题知识点之输入流、输出流、字节流、字符流、字节流的抽象基类(InputStream、OutputStream)、字符流的抽象基类(Reader、Writer)、FileWriter、FileReader
不多说,直接上干货! IO流用来处理设备之间的数据传输. java对数据的操作是通过流的方式. java用于操作流的对象都在IO包中. IO流按操作数据分为两种:字节流和字符流. IO流按流向分为:输 ...
- css实现背景透明文字不透明
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
- WPF 正確理解ContentPresenter
我們先由下圖來看類層次,可知ContentControl繼承Control,ContentPresenter繼承FrameworkElement(Control也繼承FrameworkElement) ...
- 修改jar包bug的方式
第一种方式 1. 直接在项目同样的包名里面新建同样的class,会优先jar包的class加载,等同于覆盖. 第二种方式 2. 拿到第一步打包后的jar或者war,找到相应的java类的.class文 ...
- SQLSERVER 2012的多维数据库浏览 ,不能多维的显示
网上搜索后发现,原来ssms2012不支持这种方式,要使用Excel的方式 参考地址:http://www.flybi.net/question/12567
- Spring课程 Spring入门篇 3-5 Spring bean装配(上)之Resource
课程链接: 1 resource简析 2 resource代码演练 1 resource简析 urlsource:url对应的资源 classpath:获取类路径下的资源文件 filesystemre ...
- php cur错误:SSL错误 unable to get local issuer certificatebool
采集https链接时出现的问题 办法:跳过SSL证书检查 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLO ...