第七章动态创建HTML内容

javascript也可以改变网页的结构和内容

document.write()方法

可以方便快捷地把字符串插入到文档里

document.write("<strong>hello world.</strong>");

/*

function insertP(text){

    var str = "<p>";

    str += text;

    str +="</p>";

    document.write(str);

}

insertP("hello world!");

*/

innerHTML属性

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

<div id="test">

</div>

<script type="text/javascript">

    window.onload = function(){

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

        testdiv.innerHTML ="<p>这是一句话</p>"

    }

</script>

createElement()方法

创建一个元素节点。这个方法本身并无实际用处，需要把新创建出来的元素插入文档才能达到实际目的。

document.creatElement(node.name)

appendChild()方法

让新创建的节点成为文档某个现有节点的一个子节点。

parent.appendChild(child)

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

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

test.appendChild(para);

//document.getElementById("test").appendChild(document.createElement("p"));

creatTextNode()方法

创建一个文本节点。语法：document.creatTextNode(text)

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

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

test.appendChild(text);

insertBefore()方法

这个方法将把一个新元素插入到一个现有元素的前面。想调用此方法，必须知道三件事：

-想插入的新元素

-想把新元素插入到哪个现有元素的前面

-这两个元素共同的父元素

parentElement.insertBefore(newElement,targetElent)

比如，把description插入到图片列表imagegallery的前面。

var gallery = document.getElementById("imagegallery");

      gallery.parentNode.insertBefor(description,gallery);

编写insertAfter()函数

/* 编写insertAfter函数 */

function insertAfter(newElement,targetElement){

    var parent = targetElement.parentNode;

    if (parent.lastChild == targetElement){

        parent.appendChild(newElement);

    }else{

        parent.insertBefor(newElement,targetElement.nextSibling);

    }

}

巴特西

第七章动态创建HTML内容

最新文章

热门文章

巴特西

第七章 动态创建HTML内容

最新文章

热门文章

第七章动态创建HTML内容