花都定制型网站建设,郑州网站seo厂家,大数据公司排名,wordpress私密评论目录
一#xff1a;介绍
二#xff1a;语法与例子
1、语法
2、一些例子
例1#xff1a;
例2#xff1a;
例3#xff1a;
3、第二种写法 一#xff1a;介绍 document.createElement()是在对象中创建一个对象#xff0c;要与appendChild() 或 insertBefore()方法…目录
一介绍
二语法与例子
1、语法
2、一些例子
例1
例2
例3
3、第二种写法 一介绍 document.createElement()是在对象中创建一个对象要与appendChild() 或 insertBefore()方法联合使用。其中appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
二语法与例子
1、语法 Vue.js提供了一个函数createElment用于创建视图元素。createElement是Vue.js中最基本的构建块之一它用于创建虚拟DOM节点对象。 createElment接收三个参数第一个参数tagName是一个字符串表示节点的标签名。第二个参数data是一个对象用于设置该节点的属性、样式和事件等。第三个参数children是一个数组用于指定该节点的子节点。 比如在下面的代码中我们通过createElment函数创建了一个元素该元素有一个id属性和一个style样式当它被点击时会弹出一个提示框。此外该元素还有两个子节点分别是一个内容为“Hello Vue.js!”的P元素和一个内容为“Click me!”的button元素。
Vue.createElment(div, {attrs: {id: app},style: {color: red},on: {click: function () {alert(Hello World!)}}}, [Vue.createElment(p, Hello Vue.js!),Vue.createElment(button, Click me!)
])
2、一些例子 下面这个是所有例子的共有html。 div idboard/div 例1
script typetext/javascriptvar board document.getElementById(board);var e document.createElement(input);e.type button;e.value 这是测试加载的小例子;var object board.appendChild(e);
/script
效果在标签board中加载一个按钮属性值为“这是测试加载的小例子”。 例2
script typetext/javascriptvar board document.getElementById(board);var e2 document.createElement(select);e2.options[0] new Option(加载项1, );e2.options[1] new Option(加载项2, );e2.size 2;var object board.appendChild(e2);
/script
效果在标签board中加载一个下拉列表框属性值为“加载项1”和“加载项2”。 例3
script typetext/javascriptvar board document.getElementById(board); var e3 document.createElement(input);e4.setAttribute(type, text);e4.setAttribute(name, q);e4.setAttribute(value, 使用setAttribute);e4.setAttribute(onclick, javascript:alert(This is a test!);); var object board.appendChild(e3);
/script
效果在标签board中加载一个文本框属性值为“使用setAttribute”。 当点击这个文本框时会弹出对话框“This is a test!”。 根据上面例子可以看出可以通过加载对象的属性来设置参数是相同的。使用e.typetext 和 e.setAttribute(type,text)效果是一致的。
3、第二种写法 在实际开发中也会使用到另外两种方法来实现功能。下面我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同。 比如我们要在下面这个div中插入一个子节点P时 div idtestp idx1Node/ppNode/p/div 我们可以这样写
script typetext/javascriptvar oTest document.getElementById(test);var newNode document.createElement(p);newNode.innerHTML This is a test;//测试从这里开始//appendChild方法oTest.appendChild(newNode);//insertBefore方法oTest.insertBefore(newNode,null);
/script 通过以上的代码可以测试到一个新的节点被创建到了节点div下且该节点是div最后一个节点。很明显通过这个例子可以知道appendChildhild和insertBefore都可以进行插入节点的操作。 在上面的例子中有这样一句代码oTest.insertBefore(newNode,null) 这里insertBefore有2个参数可以设置第一个是和appendChild相同的第二却是它特有的。它不仅可以为null还可以为
script typetext/javascriptvar oTest document.getElementById(test);var refChild document.getElementById(x1);var newNode document.createElement(p);newNode.innerHTML This is a test;oTest.insertBefore(newNode,refChild);
/script
效果这个例子将在x1节点前面插入一个新的节点
又或
script typetext/javascriptvar oTest document.getElementById(test);var refChild document.getElementById(x1);var newNode document.createElement(p);newNode.innerHTML This is a test;oTest.insertBefore(newNode,refChild.nextSibling);
/script
效果这个例子将在x1节点的下一个节点前面插入一个新的节点
还可为
script typetext/javascriptvar oTest document.getElementById(test);var newNode document.createElement(p);newNode.innerHTML This is a test;oTest.insertBefore(newNode,oTest.childNodes[0]);
/script 这个例子将在第一子节点前面插入一个新的节点也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来发现insertBefore()方法插入节点是可以在子节点列表的任意位置。 从这几个例子中得出 appendChild() 方法在节点的子节点列表末添加新的子节点。 insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
