动态创建HTML内容

document.write()方法

document.write方法可以方便快捷的把字符串插入到文档里。它最大的缺点是违背了”分离javascript“原则。即使把document.write语句挪到外部函数里,你也还是需要在HTML文档的<body>部分使用<script>标签才能调用哪个函数。

 

innerHTML属性

innerHTML属性可以用来读、写某给定元素里的HTML内容。

<div id="textidv">

<p>This is <em>my</em> content.</p>

</div>

<em>标签是斜体的意思.

标准化DOM就像是一把手术刀,innerHTML是一把劈材刀。

当需要把一大段HTML内容插入一个网页时,innerHTML属性更适用。它是一个读写方法,不仅可以用它来读出元素的HTML内容,还可以用它把HTML内容写入元素。

innerHTML属性要比document.write()方法更值得推荐。

 

DOM提供的方法

DOM是一个双向车道,不仅可以查询文档的内容,还可以刷新文档的内容。只要改变了DOM节点树,文档在浏览器里呈现效果就会发生变化。

 

createElement()方法

appendChild()方法

createTextNode方法 

      var testdiv = document.getElementById("testdiv");

  var para = document.createElement("p");

  testdiv.appendChild(para);

      var txt = document.createTextNode(”hello world!");

      para.appendChild(txt);

 

insertBefore()方法

    parentElement.insertBefore(newElement,targetElement

insertAfter()方法

    function insertAfter(newElement,targetElement){

         var parent = targetElement.parentNode;

         if(parent.lastChild == targetElement){

                  parent.appentChild(newELement); 

        

          else{

               parent.insertBefore(newElement,targetElement.nextSibling);

          }

   }

 

 

 

 

 

 

转载于:https://www.cnblogs.com/Eleanore/archive/2012/05/25/2518164.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值