创建DOM元素

昨天感冒,一天都是昏昏沉沉的,晚上八点就休息了,一觉醒来整个神清气爽,感觉感冒好了一大截。本来今天要好好的学习的,看了一个帖子,实在挪不开眼睛,所以通常五点开始的学习,拖到了六点多。好在今年下雨,晚上不用跑步去了,嘻嘻,挺好!

createElement(标签名)  创建一个节点

appendChild(节点)  追加一个节点

插入节点(节点,原有节点) 在已有节点前面插入

删除DOM元素 removeChild(节点)  删除一个节点

文档碎片document.createDocumentFragment() 在IE6以下可以提高效率,在现在常用到的浏览器当中,不怎么影响运行性能。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload=function(){
                var otxt=document.getElementById(‘txt1‘);
                var obtn=document.getElementById(‘btn1‘);
                var oul=document.getElementById(‘ul1‘);
                obtn.onclick=function(){
                    var oli=document.createElement(‘li‘);
                    oli.innerHTML=otxt.value;
                    oul.appendChild(oli);
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="txt1" />
        <input type="submit" id="btn1" value="提交" />
        <ul id="ul1"></ul>
    </body>
</html>

这个代码,写完之后,找不到错误,费半天劲,才知道在appendChild后面(oli);没有引号

大神说了:

 字符串加引号

你定义的那些节点或变量不加 

时间: 2024-10-06 05:26:19

创建DOM元素的相关文章

jQuery基础之(四)jQuery创建DOM元素

利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery使用$就可以直接创建DOM元素 var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript var oNewP2 = document.createElement("p"); var oTex

js动态创建dom元素示例

js中有时候需要动态的创建代码,这也是常规的基础知识,再次我总结一下,以备后用! 直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-hi

javascript中级--DOM元素的创建、插入、删除

一.创建DOM元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var oUl = docu

CSS切换动画Transition应用到新创建dom不起作用

transition在新创建的dom上,无法立即生效,因为css会被合并计算,所以要看到动画效果,必须将切换css代码放入到setTimeout函数内,异步运行才可以. 示例代码:调用两个函数,分别创建顶部滑入.底部滑入动画,第一个不使用setTimeout.第二个使用setTimeout函数,可以明显看出差别. html代码: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8&

jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] 使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0) 使用jquery的eq方法获取jquery对象集中的jquery对象元素: $('img[alt]').eq(0) $('img[alt]').first(

JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children c)   . parentNode . children [索引] . children:获取所有子节点 opacity:0-1:透明度 alpha(opacity:百分数):IE6/7/8透明度 先绑定事件再进行循环 previousNode()上一个兄弟节点 alert(变量名)可测试变量名是否

jQuery -&gt; 如何【先创建、再修改、后添加】 DOM元素

如何一气呵成地,on the fly地操作DOM元素呢? 例如顺序执行[创建]-> [修改]-> [添加]三个动作. 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行. 首先创建一个p元素,内容包含一个a元素. $('<p><a>jQuery</a></p>') 然后为a元素添加一个href属性 $('<p><a>jQuery</a></p>'

jQuery -&amp;gt; 怎样【先创建、再改动、后加入】 DOM元素

怎样一气呵成地.on the fly地操作DOM元素呢? 比如顺序运行[创建]-> [改动]-> [加入]三个动作. 因为jQuery支持链式操作,事实上就是设计模式的builder模式,所以我们能够把三个操作串在一起来运行. 首先创建一个p元素,内容包括一个a元素. $('<p><a>jQuery</a></p>') 然后为a元素加入一个href属性 $('<p><a>jQuery</a></p>

JQuery动态创建、删除DOM元素

动态创建Dom节点 1.使用$(html字符串)来创建Dom节点 2.append方法用来在元素的末尾追加元素 3.prepend,在元素的开始添加元素. prependTo.after,在元素之后添加元素(添加兄弟).before:在元素之前添加元素(添加兄弟). 删除节点 (1)remove()删除选择的节点 (2)empty()是将节点清空,清除节点的innerHTML,节点还在 动态创建Dom节点示例: 1.使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用