Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – JS: XML insertBefore createElement

I have an xml payload

   <myXML>
      <ctx>
       <recipient>
          <CardNumber>1245</CardNumber>
          <age>16</age>
          <height>180</height>          
       </recipient>
      </ctx>
   </myXML>


  var xmlDoc = DOMDocument.fromXMLString(message).getElementsByTagName("myXML")[0].toXMLString();

which basically outputs starting from the ctx node.

I want to add a new node/element at a specific location using the insertBefore, but it isnt working for me, whas the correct method?

ref – https://experienceleague.adobe.com/developer/campaign-api/api/m-DOMNode-insertBefore.html

  xmlDoc.insertBefore("<email>[email protected]</email>","<CardNumber>");

do I have to create the element? how do I insert it at a specific location? using insertBefore

  var email = xmlDoc.createElement("email");
      email.textContent = "[email protected]";
      email.appendChild(ctx)

Here is how I achieved it

var myxml = <myXML>

       <recipient>
          <CardNumber>1245</CardNumber>
          <age>16</age>
          <height>180</height>          
       </recipient>
       <recipient2>
          <CardNumber1>1245</CardNumber1>
          <age>16</age>
          <height>180</height>          
       </recipient2>       
  
   </myXML>;

  var xmlDoc = new DOMDocument.fromXMLString(myxml);
  var root = xmlDoc.root;
  
    var ctx = xmlDoc.createElement("ctx");
  root.appendChild(ctx);
  
  var emailElem = xmlDoc.createElement("email");
  emailElem.textContent = "[email protected]";
  var parent = xmlDoc.getElementsByTagName("CardNumber")[0].parentNode;
  var email = xmlDoc.getElementsByTagName("CardNumber")[0];
  
  parent.insertBefore(emailElem, email);
  
logInfo(xmlDoc.toXMLString())

The output is

<?xml version='1.0'?>
<myXML>
  <recipient>
    <email>[email protected]</email>
    <CardNumber>1245</CardNumber>
    <age>16</age>
    <height>180</height>
  </recipient>
  <recipient2>
    <CardNumber1>1245</CardNumber1>
    <age>16</age>
    <height>180</height>
  </recipient2>
  <ctx/>
</myXML>
Tags:

2

Answers


  1. 0

    I have no experience using Abode Campaign.

    Using DOM methods in a browser or other environment that supports DOM manipulation, you can do something like the following, which inserts a Node, not text. See MDN’s Node: insertBefore() method.

    var parser = new DOMParser();
var xml = parser.parseFromString(`<myXML>
      <ctx>
       <recipient>
          <CardNumber>1245</CardNumber>
          <age>16</age>
          <height>180</height>          
       </recipient>
      </ctx>
   </myXML>`, "text/xml");

var email = xml.createElement("email");
email.textContent = "[email protected]";

xml.querySelector("recipient")
.insertBefore(
  email, 
  xml.querySelector("recipient")
 .firstElementChild
);
    Login or Signup to reply.
  2. 0

    You can use query selector with CSS selectors to fetch element nodes.

    Creating a node in DOM consists of two parts. You create the node using a document method and append/insert the node using a method of the node.

    Classic (older) DOM methods like appendChild() or insertBefore() require a node argument. However modern DOM methods like append()/before()/after() will create text nodes for string arguments and take multiple arguments.

    before() allows to shorten insertBefore() calls:

    target.parentNode.insertBefore(newNode, target) → target.before(newNode)

    const xmlDocument = (new DOMParser()).parseFromString(
   `<myXML>
     <ctx>
       <recipient>
         <CardNumber>1245</CardNumber>
         <age>16</age>
         <height>180</height>          
       </recipient>
     </ctx>
   </myXML>`, 
   "text/xml"
);

// fetch the CardNumber element
const recipientCardNumber = xmlDocument.querySelector('recipient > CardNumber');

// create the new element node
const email = xmlDocument.createElement("email");
// append text content
email.append("[email protected]");

// insert new node before fetched CardNumber element
recipientCardNumber.before(email);

document.querySelector('#output').value = 
  (new XMLSerializer()).serializeToString(xmlDocument);
    textarea {
  width: calc(100% - 10px);
  height: 300px;
}
    <textarea id="output"></textarea>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search