• 《DOM Scripting》学习笔记-——第七章 动态创建html内容


    本章内容

    1、动态创建html内容的“老”技巧:document.write()innerHTML属性

    2DOM方法:createElement(),creatTextNode(),appendChild(),insertBefore().

    document.write()

    语法:document.write(“ ”)

            document.write(变量)

    缺点违背了“分离js”原则。即使把document.write语句挪到外部函数里还是需要在html文档的<body>部分使用<script>标签才能调用那个函数。

    二、innerHTML属性

     

     innerHTML属性没有细节可言,要想获得细节,就必须使用DOM方法和属性。

    三、DOM提供的方法

    1、createElement()方法

    语法:document.createElement(nodeName)

    举例:document.createElement("p");

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

    window.onload = function() {
    var para = document.createElement("p");
    var info = "nodeName: ";
    info+= para.nodeName;
    info+= " nodeType: ";
    info+= para.nodeType;
    alert(info);
    }

     

    2appendChild()方法

    语法:parent.appendChildchild

    举例:var testdiv = document.getElementById("testdiv");

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

            testdiv.appendChild(para);

    3、createTextNode()方法

    语法:document.creatTextNode(text)

    举例:var txt = document.createTextNode("Hello world");

    para.appendChild(txt);

    window.onload = function() {

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

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

    testdiv.appendChild(para);

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

    para.appendChild(txt);

    }

    综合举例:

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

     

    这些html内容对应着一个p元素节点,它本身又包含以下几个子节点

    1,一个文本节点,其内容是“This is

    2,一个元素节点,这个元素节点的名字是“em”;这个元素节点还包含着:

    (1),一个文本节点,内容是my

    3,一个文本节点,其内容是“ content.”(第一个字符是空格,最后一个字符是英文句号)。

    window.onload = function() {

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

    var txt1 = document.createTextNode("This is ");

    para.appendChild(txt1);

    var emphasis = document.createElement("em");

    var txt2 = document.createTextNode("my");

    emphasis.appendChild(txt2);

    para.appendChild(emphasis);

    var txt3 = document.createTextNode(" content.");

    para.appendChild(txt3);

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

    testdiv.appendChild(para);

    }

  • 相关阅读:
    DOS 批处理命令For循环命令详解
    怎样在电脑上下载哔哩哔哩的视频?
    华为事件启思:美国究竟有多少高科技公司?
    常用电子书下载收藏
    [置顶] 【玩转cocos2d-x之七】场景类CCScene和布景类CCLayer
    递归循环JSON
    POJ_1365_Prime_Land
    WIX在VS2012中如何制作中文安装包
    PKU Online Judge 1054:Cube (设置根节点)
    MFC——AfxParseURL用法
  • 原文地址:https://www.cnblogs.com/yangfang228/p/6042348.html
Copyright © 2020-2023  润新知