XML DOM添加节点


tryitimg.gif尝试一下 - 实例


下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。

在最后一个子节点之后添加一个节点
本例使用 appendChild() 方法向一个已有的节点添加一个子节点。

在指定的子节点之前添加一个节点
本例使用 insertBefore() 方法在一个指定的子节点之前插入一个节点。

添加一个新属性
本例使用 setAttribute() 方法添加一个新的属性。

向文本节点添加数据
本例使用 insertData() 把数据插入一个已有的文本节点中。


添加节点 - appendChild()

appendChild() 方法向一个已有的节点添加一个子节点。

新节点会添加(追加)到任何已有的子节点之后。

注意:如果节点的位置很重要,请使用 insertBefore() 方法。

下面的代码片段创建一个元素(),并把它添加到第一个 元素的最后一个子节点后面:

实例

    

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

  2. 创建一个新节点

  3. 把这个节点追加到第一个 元素

遍历并向所有 元素追加一个元素:尝试一下


插入节点 - insertBefore()

insertBefore()方法用于在指定的子节点之前插入节点。

在被添加的节点的位置很重要时,此方法很有用:

实例

    

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

  2. 创建一个新的元素节点

  3. 把这个新节点插到最后一个 元素节点之前

如果 insertBefore() 的第二个参数是 null,新节点将被添加到最后一个已有的子节点之后。

x.insertBefore(newNode,null)x.appendChild(newNode)都可以向 x 追加一个新的子节点。


添加新属性

addAtribute() 这个方法是不存在的。

如果属性不存在,则 setAttribute() 可创建一个新的属性:

实例

    

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

  2. 把第一个 元素的 "edition" 属性的值设置(创建)为 "first"

注意:如果属性已存在,setAttribute() 方法将覆盖已有的值。


向文本节点添加文本 - insertData()

insertData() 方法将数据插入已有的文本节点中。

insertData() 方法有两个参数:

  • offset - 在何处开始插入字符(以 0 开始)

  • string - 要插入的字符串

下面的代码片段将把 "Easy" 添加到已加载的 XML 的第一个 元素的文本节点:</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; document.write(x.nodeValue); x.insertData(0,"Easy "); document.write("<br>"); document.write(x.nodeValue); </script> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <br> </div> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/zh-tw/xml/xml-nodes-create.html" rel="prev">DOM 创建节点</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/zh-tw/xml/xml-nodes-clone.html" rel="next">XML DOM 克隆节点</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>教學導航</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" target="_blank" title="大前端">大前端</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="超文本標記語言">超文本標記語言</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="反應">反應</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="阿賈克斯">阿賈克斯</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="引導程式">引導程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="基礎">基礎</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/2/type/3.html" title="高圖表">高圖表</a> <a href="//m.sbmmt.com/zh-tw/course/list/2/type/3.html" title="地圖應用程式介面">地圖應用程式介面</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" target="_blank" title="後端開發">後端開發</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="拉維爾">拉維爾</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="Python">Python</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="去">去</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="爪哇">爪哇</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="C#">C#</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="聯合應用程式">聯合應用程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="薑戈">薑戈</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="紅寶石">紅寶石</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="珀爾">珀爾</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="服務程式">服務程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="盧阿">盧阿</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="斯卡拉">斯卡拉</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="應用機器學習">應用機器學習</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="VB腳本">VB腳本</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" target="_blank" title="資料庫">資料庫</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="雷迪斯">雷迪斯</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="甲骨文">甲骨文</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="MongoDB">MongoDB</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="記憶體快取">記憶體快取</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="SQL伺服器">SQL伺服器</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" target="_blank" title="行動端">行動端</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="小程式">小程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="統一應用程式">統一應用程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="Flutter">Flutter</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="安卓">安卓</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="iOS">iOS</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="迅速">迅速</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="其它">其它</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" target="_blank" title="維運開發">維運開發</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="碼頭工人">碼頭工人</a> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="Git">Git</a> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="其它工具">其它工具</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" target="_blank" title="UI設計">UI設計</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" title="Axure">Axure</a> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" title="Web Forms">Web Forms</a> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" title="PS">PS</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" target="_blank" title="電腦基礎">電腦基礎</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="設計模式">設計模式</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="正規表示式">正規表示式</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="網站建置指南">網站建置指南</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="瀏覽器資訊">瀏覽器資訊</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="網站主機">網站主機</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="CodeBasic">CodeBasic</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="XML文檔物件模型">XML文檔物件模型</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="X路徑">X路徑</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="X查詢">X查詢</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="星聯">星聯</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="X指針">X指針</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="XML模式">XML模式</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="靜止無功發生器">靜止無功發生器</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" target="_blank" title="網頁服務">網頁服務</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="Web Services">Web Services</a> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="SOAP">SOAP</a> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="提交">提交</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>