【DOM编程艺术】动态创建标记（签）---创建和插入节点

刺骨的言语ヽ痛彻心扉 2022-01-06 06:19 184阅读 0赞

window.οnlοad=function(){
        var para=document.createElement('p');
        var info= 'nodeName:';
        info += para.nodeName;
        info += '  nodeType:';
        info += para.nodeType;
        alert(info);    //nodeName:P nodeType:1
    }

createElement用来创建元素节点

创建P元素后，P元素就像任何其他的节点一样有了自己的DOM属性。即nodeName和nodeType值

window.οnlοad=function(){
        var para=document.createElement('p');
        var testdiv=document.getElementById('testdiv');
        testdiv.appendChild(para);
        alert(testdiv.innerHTML); //<p></p>
    }

创建元素，后插入文档中

window.οnlοad=function(){
        var para=document.createElement('p');
        var testdiv=document.getElementById('testdiv');
        testdiv.appendChild(para);
        var txt=document.createTextNode('Hello world!');
        para.appendChild(txt);
        alert(testdiv.innerHTML); //<p>Hello world!</p>
    }

以上例子是按照以下顺序来创建和插入节点的：

（1）创建一个p元素

（2）将p元素插入到文档的一个元素节点上

（3）创建一个文本节点

（4）将文本节点插入到刚才创建的p元素节点上

转载于:https://www.cnblogs.com/positive/p/3665475.html

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 DOM编程艺术

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

绝地灬酷狼/ 2022年07月11日 07:49/ 0 赞/ 186 阅读

相关【DOM 编程艺术】3.4 节点

> 节点分为：元素节点、文本节点和属性节点等。 <!doctype html> <html lang="en"> <head> <me

阳光穿透心脏的1/2处/ 2022年06月08日 08:38/ 0 赞/ 177 阅读

相关 DOM动态创建标记实例

本文实例来源于《JavaScript DOM编程艺术（第二版）》第8章知识点可参考上一篇博客《DOM动态创建标记》，地址：[http://blog.csdn.net/ru

野性酷女/ 2022年06月07日 02:16/ 0 赞/ 189 阅读

相关 DOM动态创建标记

所谓动态创建标记，就是说向页面中添加本来没有的内容。比如下面这段简单的代码： <!doctype html> <html lang="lang"> <

Bertha 。/ 2022年06月07日 01:48/ 0 赞/ 223 阅读

相关 JavaScript制DOM创建节点

上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法，当我们获取到了这些对象之后，下一步将对这些对象进行更改，在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效

秒速五厘米/ 2022年06月01日 13:18/ 0 赞/ 224 阅读

相关创建DOM新节点

一介绍创建新的节点先通过使用文档对象中的createElement()方法和createTextNode()方法，生成一个新元素并生成文本节点，然后通过使用appendC

雨点打透心脏的1/2处/ 2022年05月12日 00:14/ 0 赞/ 236 阅读

相关 js+DOM创建和操作节点

1.创建节点并添加内容:使用的方法:createElement和createTextNode <html> <head> <meta http-equiv="Cont

- 日理万妓/ 2022年03月28日 03:37/ 0 赞/ 273 阅读

相关【DOM编程艺术】动态创建标记（签）---创建和插入节点

window.οnlοad=function(){ var para=document.createElement('p'); var

刺骨的言语ヽ痛彻心扉/ 2022年01月06日 06:19/ 0 赞/ 185 阅读

相关 JavaScript DOM创建元素节点（createElement）创建文本节点（createTextNode）创建注释节点createComment

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

傷城~/ 2021年07月24日 17:20/ 0 赞/ 506 阅读

相关 DOM节点的创建、插入、删除等经验集合

目录 DOM节点的创建、插入、删除各种经验集合一、DOM节点的创建 1.1 JS方法 1.1.1 HTML页面中： 1.1.2 JS页面中 1.2 JQ方法

青旅半醒/ 2021年07月24日 11:31/ 0 赞/ 393 阅读