getElementByID、createElement、appendChild几个DHTML元素

 更新时间:2008年06月25日 21:17:24   作者:  
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问


appendChild方法的使用
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
   <title>无标题文档</title>
</head>
<script language="javascript">
//生成与输入内容匹配行
          function setNames() {            
       completeBody = document.getElementById("complete_body");
              var row, cell, txtNode;

     

                 //var nextNode = names[i].firstChild.data;
                 row = document.createElement("tr");
                 cell = document.createElement("td");

                
                 cell.setAttribute("bgcolor", "#FFFAFA");
                 cell.setAttribute("border", "0");                        

                 //txtNode = document.createTextNode(nextNode);
                 alert("sdf");
                 var newText = document.createTextNode("This is the second paragraph.");
                 //txtNode=document.createElement("div");

                 alert("sdf1");
                 cell.appendChild(newText);
                 alert("sdf2");
                 row.appendChild(cell);
                 completeBody.appendChild(row);
         }
</script>
<body>
<input type="submit" name="sdf" onclick="setNames()">
   <table id="complete_table" bgcolor="#FFFAFA" border="0"
    cellspacing="0" cellpadding="0" />
    <tbody id="complete_body"></tbody>
   </table>
</body>
</html>



================================= 

createElement

<html> 
<head> 
<title>createElement</title> 
<script language="javascript"> 
<!-- 
var i=0 ; 

function addInput() { 
var o = document.createElement("input"); 
o.type = "button" ; 
o.value = "按钮" + i++ ; 
o.attachEvent("onclick",addInput); 
document.body.appendChild(o); 
o = null; 

//--> 
</script> 
</head> 
<body onload="addInput();"> 
</body> 
</html> 

相关文章

  • 详解微信小程序之一键复制到剪切板

    详解微信小程序之一键复制到剪切板

    这篇文章主要介绍了微信小程序一键复制到剪切板,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • GoJs中使用HTML方法示例

    GoJs中使用HTML方法示例

    这篇文章主要为大家介绍了GoJs中使用HTML方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • javascript中的this详解

    javascript中的this详解

    avaScript 中的 this 关键字,深入浅出的分析其在不同情况下的含义,形成这种情况的原因以及 Dojo 等 JavaScript 工具中提供的绑定 this 的方法。可以这样说,正确掌握了 JavaScript 中的 this 关键字,才算迈入了 JavaScript 这门语言的门槛。
    2014-12-12
  • javascript中的正则表达式使用详解

    javascript中的正则表达式使用详解

    之前讲了javascript对正则表达式的实现方式了,只定义了正则表达式,但是如何在javascript中真正使用正则表达式呢?在javascript中RegExp和String对象都有处理正则表达式的方法。
    2015-08-08
  • JavaScript实现按键精灵的原理分析

    JavaScript实现按键精灵的原理分析

    这篇文章主要介绍了JavaScript实现按键精灵的原理分析,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • Javascript es7中比较实用的两个方法示例

    Javascript es7中比较实用的两个方法示例

    这篇文章主要给大家分享了关于Javascript es7中比较实用的两个方法示例,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • 小程序云开发如何实现图片上传及发表文字

    小程序云开发如何实现图片上传及发表文字

    这篇文章主要为大家详细介绍了小程序云开发教程,如何实现图片上传及发表文字,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,实现起来也很容易,但是在测试时同事提出了一个bug,怎么解决呢?今天小编通过本教程给大家分享下
    2017-02-02
  • JS前端攻坚Eventbus实现更新示例详解

    JS前端攻坚Eventbus实现更新示例详解

    这篇文章主要为大家介绍了JS前端攻坚Eventbus实现更新示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • js取值中form.all和不加all的区别介绍

    js取值中form.all和不加all的区别介绍

    在js里取值,可以用form.xx.value,也可以用form.all.xx.value,那么js取值中form.all和不加all有什么区别呢?下面就为大家详细介绍下
    2014-01-01

最新评论