`
leongod
  • 浏览: 63705 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

document.createElement()的用法

 
阅读更多

document.createElement()的用法
      分析代码时,发现自己的盲点——document.createElement(),冲浪一番,总结了点经验。

      document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

       下面,举例说明document.createElement()的用法。<div id="board"></div>

例1:

        <script type="text/javascript">
            var board = document.getElementById("board");
            var e = document.createElement("input");
            e.type = "button";
            e.value = "这是测试加载的小例子";
            var object = board.appendChild(e);
        </script>

效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。

       

例2:

        <script type="text/javascript">
            var board = document.getElementById("board");
            var e2 = document.createElement("select");
            e2.options[0] = new Option("加载项1", "");
            e2.options[1] = new Option("加载项2", "");
            e2.size = "2";
            var object = board.appendChild(e2);
        </script>

效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。

       

例3:

        <script type="text/javascript">
            var board = document.getElementById("board");          
            var e3 = document.createElement("input");
            e4.setAttribute("type", "text");
            e4.setAttribute("name", "q");
             e4.setAttribute("value", "使用setAttribute");
            e4.setAttribute("onclick", "javascript:alert('This is a test!');");          
            var object = board.appendChild(e3);
        </script>

效果:在标签board中加载一个文本框,属性值为“使用setAttribute”。 当点击这个文本框时,会弹出对话框“This is a test!”。

        根据上面例子,可以看出,可以通过加载对象的属性来设置,参数是相同的。使用e.type="text" 和 e.setAttribute("type","text")效果是一致的。

       

        下面,我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同。

         比如我们要在下面这个div中插入一个子节点P时:<div id="test"><p id="x1">Node</p><p>Node</p></div>

我们可以这样写:

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
//测试从这里开始
//appendChild方法:
oTest.appendChild(newNode);
//insertBefore方法:
oTest.insertBefore(newNode,null);
</script>

      通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

   在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:

<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild);
</script>

效果:这个例子将在x1节点前面插入一个新的节点

又或:

<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>

效果:这个例子将在x1节点的下一个节点前面插入一个新的节点

还可为:

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>

  这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。

  从这几个例子中得出:

  appendChild() 方法在节点的子节点列表末添加新的子节点。

  insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

 

 

今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素

var inputObj    = document.createElement
     ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " readonly >");


但是这样的情况在ff下是不兼容的。
还有就是特别注意input元素的创建:与 input 有关的元素有很多,比如:checkbox、radio、submit、reset...,因此创建 input 是个很特殊的用法。

创建不同的 input 正确的做法是:

<div id="board"></div>

<script type="text/javascript">
<!--
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "radio"; //紧接着上一行写
var obj = board.appendChild(e);
obj.checked = true;
//如下写法也是正确的:
//e.checked = true;
-->
</script>

针对 input,在 Netscape、Opera 和 Firefox 中 e.type 既可以在 appendChild 之前,也可以在其之后。但在 IE 中 type 属性必须在前,其它属性必须在后。

IE 创建元素,还有一个特点,就是可以连同属性一同创建,比如:var e = document.createElement("<input type='radio' name='r' value='1' />"); 这在其它浏览器中是不行的,所以我们也不支持。

总结:

•针对非 input 元素,各浏览器中,既可以把对元素属性的改变写在显示元素(insertBefore 或 appendChild)之前,也可以在其后。
•针对 input 元素,为了兼容 IE,type 属性写在显示元素(insertBefore 或 appendChild)之前,其它属性写在其后。
推荐:

•除了 input 元素的 type 属性写在显示元素(insertBefore 或 appendChild)之前外,其它属性都写在显示元素之后。
•改变属性时,对写在显示元素(insertBefore 或 appendChild)之前的用 createElement 的返回值,对写在显示元素之后的用 insertBefore 或 appendChild 的返回值。
1.var echkbox=document.createElement("input");   
2.echkbox.setAttribute("type","checkbox");   
3.echkbox.setAttribute("id","inputid");   
4.echkbox.setAttribute("name","inputname");   
5.echkbox.setAttribute("value","inputvalue");   
6.var addhere=document.getElementById("someElementId");   
7.addhere.appendChild(echkbox);   
8.echkbox.setAttribute("checked","checked");   
9.alert(document.getElementById("inputid").checked);
<!--document方法:
getElementById(id)                            返回指定结点的引用
getElementsByTagName(name)       返回文档中所有匹配的元素的集合
createElement(name)                         创建指定类型的新结点
createTextNode(text)                         创建一个纯文本结点
element方法:
getAttribute(id)                                   返回指定属性的值
setAttribute(id,value)                         给属性赋值
removeAttribute(id)                           移除指定属性和它的值
getElementsByTagName(name)       返回结点内所有匹配的元素的集合
node方法:
appendChild(child)                             给指定结点添加一个新的子结点
removeChild(child)                             移除指定结点的子结点
replaceChild(newChild,oldChild)       替换指定结点的子结点
insertBefore(newChild,refChild)       在同一层级的结点前面插入新结点
hasChildNodes()                                 如果结点有子结点则返回true
node属性:
nodeName                                         以字符串的格式存放结点的名称
nodeType                                           以整型数据格式存放结点的类型
nodeValue                                          以可用的格式存放结点的值
parentNode                                        指向结点的父结点的引用
childNodes                                         指向子结点的引用的集合
firstChild                                            指向子结点结合中的第一个子结点的引用
lastChild                                             指向子结点结合中的最后一个子结点的引用


动态加载js

var Rash=true;
var msg="";
function norash()
{
   if (confirm("确定要取消吗"))
   Rash=false;
}
function rashit()
{
    setInterval('getrss()',Inttime);
}
function getrss()
{
if (Rash==true)
{
     head=document.getElementsByTagName('head').item(0);
    script=document.createElement('script');
    script.src='INCLUDE/AutoUpdate.asp';
   script.type='text/javascript';
   script.defer=true;
   void(head.appendChild(script));
   window.status=msg;
   }
}
rashit();

分享到:
评论

相关推荐

    document.createElement()用法

    `document.createElement()` 是JavaScript中的一个核心方法,用于在DOM(Document Object Model)中动态创建新的元素节点。这个方法允许开发者在网页加载后根据需要添加新的HTML元素,为页面增加交互性和动态性。它...

    document.createElement(&quot;A&quot;)比较不错的属性

    综上所述,通过使用`document.createElement("A")`方法,开发者可以灵活地创建具有各种属性的`&lt;a&gt;`元素,并通过JavaScript控制其行为和样式。在Web开发中,这种技术对于实现页面的动态交互和功能至关重要。 需要...

    document.createElement()用法及注意事项(ff下不兼容)

    `document.createElement()` 是JavaScript中的一个核心方法,用于动态创建HTML元素。这个方法在处理动态网页和交互式应用时非常有用,因为它允许我们在页面加载后或用户操作时动态地添加、修改或删除DOM元素。然而,...

    js 用CreateElement动态创建标签示例

    //定义方法创建一个label标签 //*************************************// 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement(“label”); var label_id = document...

    javascript中createElement的两种创建方式.docx

    1. **创建元素:** 使用`document.createElement("input")`创建一个`&lt;input&gt;`元素。 2. **设置属性:** 通过`btn.type = "button"`设置元素的`type`属性为`button`。 3. **绑定事件:** 通过`btn.onclick`绑定点击...

    IE9+已经不对document.createElement向下兼容的解决方法

    在IE9及更高版本中,为了更好地遵循W3C标准,微软对某些方法进行了调整,使得`document.createElement`的行为与其他现代浏览器如Firefox和Chrome保持一致。这可能导致在旧的编写方式下出现兼容性问题,尤其是在尝试...

    通过JavaScript下载文件到本地的方法(单文件)

    const elt = document.createElement('a'); elt.setAttribute('href', url); elt.setAttribute('download', 'file.png'); elt.style.display = 'none'; document.body.appendChild(elt); elt.click(); d

    js展现table方法

    例如,如果需要在表格中动态添加新行,可以使用`insertRow()`方法: ```javascript var newRow = tbody.insertRow(); var newCell = newRow.insertCell(); newCell.textContent = '新数据'; ``` 描述中提到了“单...

    IE中document.createElement的iframe无法设置属性name的解决方法

    在JavaScript中,我们通常会使用`document.createElement`方法来动态创建`iframe`元素。然而,一个常见的问题是在Internet Explorer(IE)浏览器中,通过`document.createElement`创建的`iframe`元素无法设置`name`...

    document.frames在非IE浏览器中的解决办法

    var iframe = document.createElement("iframe"); iframe.name = "dynamicFrame"; iframe.src = "your-source-url.html"; document.body.appendChild(iframe); ``` - **处理跨域问题**:当iframe加载的页面与...

    下载文件的几种方式

    无论是在网页上获取资源,还是从云存储服务中提取数据,我们都需要了解不同的下载方法。本文将详细介绍几种常见的下载文件方式。 1. **直接点击下载** 这是最基本的下载方式,通常在网页上,我们点击一个链接或...

    js动态生成form 并用ajax方式提交的实现方法

    这段代码首先通过`document.createElement("form")`创建了一个新的表单元素,并设置了它的`action`属性为指定的URL(这里是"http://localhost:8080/test/user"),`method`属性为"post",表示我们要使用POST方法来...

    docrel更好用的documentcreateElement方法

    在JavaScript的世界里,`document.createElement`是一个非常基础且重要的函数,用于在DOM(Document Object Model)中创建新的HTML元素。然而,随着Web开发的不断进步,开发者们有时会需要更高级、更灵活的功能来...

    JS的document_详细介绍及用法

    此外,`document`对象还有许多其他属性和方法,如`document.forms`用于访问表单,`document.images`用于访问图像,以及`document.getElementsByName()`和`getElementsByTagName()`方法用于按名称或标签名查找元素。...

    让更多浏览器支持html5元素的简单方法.docx

    这可以通过调用`document.createElement()`函数实现,如下所示: ```javascript document.createElement('article'); document.createElement('section'); document.createElement('aside'); document....

    JS实现PDF在线预览下载

    let downloadLink = document.createElement('a'); downloadLink.href = 'your-pdf-url'; downloadLink.download = 'your-pdf-name.pdf'; document.body.appendChild(downloadLink); // 需要在body内才能触发...

    javascript将svg转图片代码组件,亲测有效;

    要使用这个组件,你需要首先引入它,然后调用相应的API,具体用法可以参考组件的文档或源码。 总的来说,将SVG转换为图片是一项常见的需求,通过JavaScript的DOM操作和HTML5的特性,我们可以轻松地实现这一功能。`...

    动态创建iframe,并动态添加js执行代码

    这通常涉及到`document.write`、`innerHTML`、`createElement`和`appendChild`等方法。例如,如果我们想在新创建的iframe中注入一段JavaScript代码,可以这样做: ```javascript // 创建script元素 var script = ...

Global site tag (gtag.js) - Google Analytics