龙空技术网

JavaScript-动态创建新的DOM节点 249

源丁编程 73

前言:

现在朋友们对“js中追加节点”大体比较关怀,看官们都需要剖析一些“js中追加节点”的相关文章。那么小编在网上汇集了一些对于“js中追加节点””的相关知识,希望姐妹们能喜欢,姐妹们快快来了解一下吧!

通过DOM使用Javascript语言动态的新增DOM节点

方式1 使用document.createElement()方法创建标签元素

1.1 使用appendChild()方法追加节点

使用此方法只需三步:1 使用 document.createElement(标签元素)方法创建一个标签元素 2 指定盛装新创建元素的父级节点 3 使用appendChild(刚刚创建的元素)追加到父级元素的最后一个

追加节点

示例中因为a标签是双标签元素,可以使用其innerText或innerHTML属性为其显示的文本赋值

如果想让用户输入其显示的文本可以使用window.prompt()方法,此方法会弹出一个对话框让用户输入要显示的文本,此方法有两个参数:1 提示信息 2 默认值

a1.innerText = window.prompt("请输入要显示的文本", "要显示的文本");

1.2 使用insertBefore()方法插入节点

此方法有两个参数: 1 父级元素 2 插入在哪个子元素的前面

插入节点

因为有空文本节点的存在,所以childNodes[下标]中的下标为0或者1都行,如果下标是2则新标签会显示在p元素之下

方式2 使用innerHTML新增节点

使用父级元素节点本身的innerHTML属性为其添加子元素节点

使用属性添加节点

使用方式1与方式2的区别:

方式1 适用于创建少量元素节点的添加操作

方式2 适用于大量元素节点的一次性添加操作(先将新增的元素节点代码写好,然后调用一次innerHTML添加成功而不要反复调用innerHTML进行新增节点的操作)

标签: #js中追加节点