37. Element appendChild() 方法

实例

在列表中添加项目：document.getElementById("myList").appendChild(newListItem);添加之前：Coffee
Tea添加之后：Coffee
Tea
Water

<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);
}
</script></body>

定义和用法

appendChild() 方法向节点添加最后一个子节点。

提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。

您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul><p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p><button onclick="myFunction()">亲自试一试</button><script>
function myFunction()
{var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}
</script>

37. Element appendChild() 方法相关推荐

HTML DOM appendChild() 方法
1. 1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <ul id="myList"><li& ...
vue 报错unknown custom element解决方法
vue 报错unknown custom element解决方法参考文章: (1)vue 报错unknown custom element解决方法 (2)https://www.cnblogs.co ...
html添加子节点方法,HTML DOM appendChild() 方法
HTML DOM appendChild() 方法 appendChild()方法的作用是:在指定父节点的子节点列表的末尾添加一个节点. 如果给定的子节点是文档中现有节点的引用,appendChild ...
C# 通过ImportNode AppendChild方法合并XmlDocument，XML转为DataTable
C# 通过ImportNode AppendChild方法合并XmlDocument,XML转为DataTable var doc1 = new XmlDocument(); var doc2 = n ...
Message:Unable to locate element 问题解决方法
Message:Unable to locate element 问题解决方法参考文章: (1)Message:Unable to locate element 问题解决方法 (2)https:// ...
js中appendChild()方法
appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点,但如果Node是页面中的DOM对象,那么就不是添加节点了,就是直接Move节点. ① 创建原来没有的节点 & ...
appendChild()方法
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点例一:向ul中添加li项代码段: <body><ul id="myList">& ...
java中elements_Java Element.elements方法代碼示例
本文整理匯總了Java中org.dom4j.Element.elements方法的典型用法代碼示例.如果您正苦於以下問題:Java Element.elements方法的具體用法?Java Eleme ...
java getdocument_Java Element.getDocument方法代码示例
import javax.swing.text.Element; //导入方法依赖的package包/类 /** * Writes out all empty elements (all tags t ...
java中prtintln_Java Element.attributeValue方法代碼示例
本文整理匯總了Java中org.dom4j.Element.attributeValue方法的典型用法代碼示例.如果您正苦於以下問題:Java Element.attributeValue方法的具體用 ...

37. Element appendChild() 方法

37. Element appendChild() 方法相关推荐

最新文章

热门文章