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. MATLAB基本概念和变量

    基本概念 1.x=int8(129)=>x=127     (带符号8位整数,最大值为127) x=uint8(129)=>x=129  (无符号型,最大值为255) 2.class函数得 ...

  2. pat1053. Path of Equal Weight (30)

    1053. Path of Equal Weight (30) 时间限制 10 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue G ...

  3. php 可逆的加密算法

    代码: <?php class Test { private $authCodeKey = 'khUvFB9pijNyCYMGZdzqeKalyg7dh'; function authCode( ...

  4. Golang笔记(一)简洁的语言风格

    Golang笔记(一)简洁的语言风格 概述 Golang继承了很多C语言的风格,寡人使用了十几年C语言,切换到Golang时上手很快,并且随着深入的使用,越来越喜欢这门语言.Golang最直观的感受是 ...

  5. linux命令strings

    linux命令strings,其man信息如下:strings(1)                                        GNU Development Tools      ...

  6. mysql存储过程游标加计划任务事件调度器

    存储过程加事件调度器 -- 存储过程 (多个)游标的使用 临时表的使用(让执行时间从一个小时降低到5分钟)DELIMITER $$ DROP PROCEDURE IF EXISTS `eval_cal ...

  7. Debug Diagnostics Tool创建.Net异常转储并用Windbg分析异常

    当我们要在IIS PRD环境下分析异常,并且对问题毫无头绪,又没有权限直接上打Log的代码.这个时候就是Debug Diagnostics Tool & Windbg大显神威的时候了. Deb ...

  8. C# params 动态参数

    public delegate void Action(params object[] args); 再简单的东西都要强迫自己记录了,前段时间硬盘坏了,资料全没了,也没有备份,太痛苦了,那么多资料全没 ...

  9. java中关于冒泡排序算法的学习。

    在编程语言的学习中,排序算法在学习过程中是必须要掌握的,特别在新手的学习中,我们应该学会这些算法,本篇先介绍冒泡算法. 冒泡排序 设有一组待排序的数据: 3 2 4 5 7 1 我们需要使用冒泡排序来 ...

  10. Android学习记录帖

    1.OptionMenu的创建过程类图 2. OptionMenu的isActionBarMenu 在PhoneWindow的preparePanel中会根据设定的FEATURE来给变量isActio ...