createElement的奇妙之处
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">请点击按钮向列表中添加项目。</p>
<button onclick="myFunction()">亲自试一试</button>
<script>
function myFunction() {
//代码片段一
//var node = document.createElement("LI");
//var textnode = document.createTextNode("Water");
//node.appendChild(textnode);
/*document.getElementById("myList").appendChild(node);*/
//document.getElementsByTagName("UL")[0].appendChild(node);
//上面这种就是不会删除原有的节点,只会在最后面添加相关的节点
//代码片段二
var textnode=document.getElementsByTagName("li")[0];
/*console.log(textnode);
debugger;*/
document.getElementsByTagName("UL")[0].appendChild(textnode);
//
}
</script>
<p><b>注释:</b>首先创建 LI 节点,然后创建文本节点,然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>
</body>
</html>
为什么代码片段一是直接在末尾添加新的元素,而代码片段二中是会覆盖原有的元素的?也是说其执行的结果为tea coffee 而不是Coffee tea coffee
相关推荐
document.createElement()用法
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 下面,举例说明document.createElement()的用法。例1: 代码如下: [removed] var board = document.getEle
如何利用 Vue 3 的 `Custom Renderer`,将 Vue 渲染到非 DOM 环境,例如 `Canvas` 或 `WebGL`?
Vue 3 的。
createElement和onclick
无忧脚本代码测试网页 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js 用CreateElement动态创建标签示例
用CreateElement动态创建标签,主要是html中常用的一些标签,在本文有详细的示例,喜欢的朋友可以参考下
JavaScript:createElement和insertBefore
obj = document.createElement(tag)创建一个标签,oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入的标签的父节点调用,appendChild将创建的元素依次加在后面,而insertBefore则可以将创建的特定插在特定元素element前面 点击一下“创建LI”按钮,则HTML页面上增加一个 标签 第一步:创建 第二步:添加 两种方式 createElement和appendChild完整示例 learn js [removed] = function(){


