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 动态创建标记的更多相关文章

  1. JavaScript dom 动态创建标记

    此前的大多数DOM都是用来查找元素,getElementById和getElementsByTagName都可以方便快捷的找到文档中的某个或者某些特定的元素节点,这些元素随后可以用诸如setAttri ...

  2. js动态创建的select2标签样式加载不上解决办法

    js动态创建的select2标签样式加载不上:调用select2的select2()函数来初始化一下: js抛出了Uncaught query function not defined for Sel ...

  3. 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 ...

  4. 用JS动态创建登录表单,报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  5. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  6. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  7. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  8. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  9. js 动态创建变量

      js 动态创建变量 CreationTime--2018年7月2日15点04分 Author:Marydon 1.实现方式 通过eval()实现 2.代码实现 /** * 声明一个函数 * @ex ...

随机推荐

  1. MAYA删除不干净

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  2. 性能测试工具LoadRunner31-LR之链接mysql

    步骤: 1.建好mysql数据库并启动 2.下载libmysql.dll,放到保存脚本的文件夹下 3.编写脚本并运行 Action() { int rc; //定义状态变量,0表示成功,非0表示失败 ...

  3. Kudu compaction design

    不多说,直接上干货! http://blog.csdn.net/lookqlp/article/details/51438109

  4. javascript获取行间样式和非行间样式--兼容写法

    style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...

  5. P2P原理和NAT打洞

    1. P2P协议--点对点通信 1.1 常用的P2P协议 1.1.1 电驴(eMule) 一个电驴网络由服务器端和客户端两部分组成. 服务器端是客户端连接的.为了搜索和查找可以下载用户的桥梁.客户通过 ...

  6. Linux大文件快速处理小方法

    背景 工作中使用MapReduce任务导出一批含有路径的文件,共计行数300W+,需要检测文件是否在对应的服务器中存在,而文件所在的服务器并非hadoop集群的服务器,因此打算采用bash脚本进行.具 ...

  7. DB2错误码大全

    sqlcode sqlstate 说明 000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被解释为一个有相互关系的引用 +098 0 ...

  8. Oracle Functions转成Ms-Sql procedure

    最近公司的一些Oracle项目要转到Ms_sql上,在把Oracle Functions改成MS-Sql的Procedure时,遇到了翻译的问题. 罗列出这些问题: 一.Oracle 基本类型 ora ...

  9. IDEA中的一些常用的设置与快捷键

    idea 清屏(控制台)快捷键 eclipse清屏快捷键为鼠标右键+R 而在idea中默认并没有清屏console的快捷键 所以需要我们自行设置: 1,ctrl+alt+s打开settings 2,找 ...

  10. JavaScript new 操作符 OOP(一)

    什么是对象    对象是单个实物的抽象,通常需要一个模板,表示某一类实物的共同特征,然后对象根据这个模板生成. 对象是一个容器,封装了属性(property)和方法(method),属性是对象的状态, ...