元素节点创建及添加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
    var oD=document.getElementById("w");
    var oBtn=document.getElementById("btn");
    var oTxt=document.getElementById("txt");
    oBtn.onclick=function(){
        var oLi=document.createElement("li");
        oLi.innerHTML=oTxt.value;
        if(oD.children.length>0){//children方法详见Jquery
            //新节点插入第一个节点前面
            oD.insertBefore(oLi,oD.childNodes[0]);
        }else{
            //最后一个子节点之后添加节点
            oD.appendChild(oLi);
        }
        };

};
</script>
</head>

<body>
<input type="text" id="txt" />
<input type="button" id="btn" value="添加" />
<div>
    <ul id="w">
    </ul>
</div>
</body>
</html>
时间: 2024-10-14 12:15:27

元素节点创建及添加的相关文章

JavaScript元素的创建、添加、删除

<script> var x=document.getElementById("p2"); var obj=document.createElement("p");//增加元素,添加的时候首先需要创建出一个元素. obj.innerHTML="hello world"; x.appendChild(obj);//向x中添加一个子元素 x.removeChild(obj);//删除一个子元素 </script>

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

jquery中动态新增的元素节点无法触发事件解决办法

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点lo

JS创建一个元素节点, 并把该节点添加为文档中指定节点的子节点

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <titl

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(变量名)可测试变量名是否

Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一个li,设置li内容为PHP,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=

创建元素节点,文本节点以及在指定位置增加节点

no1.创建一个新的元素节点,并把它添加到body中 1 window.onload = t; 2 function t(){ 3 var nodeli = document.createElement('li'); 4 document.body.appendChild(nodeli); 5 nodeli.style.cssText = 'width:300px;background:red;'; 6 } 上面的显示效果为: no2.创建一个元素节点,创建一个文本节点,将文本节点追加到元素节点

jquery如何添加一个新的元素节点

jquery如何添加一个新的元素节点: 在原生的javascript中,可以使用creatElement()函数创建一个元素节点,下面介绍一下如何用jquery创建一个元素节点. 代码如下: <script type="text/javascript"> $(function(){ $(".wrap").append("<p>蚂蚁部落</p>"); }) </script> </head>

jquery里面的DOM操作(查找,创建,添加,删除节点)

一:创建元素节点(添加)    创建元素节点并且把节点作为元素的子节点添加到DOM树上 1.append(): 在元素下添加元素    用法:$("id").append("定义的节点"); 例如:var li1 = $("<li>橘子</li>");    添加属性节点:$("<li class='test'>草莓</li>") 2.appendTo(): 将元素添加到元素里面