Add a new element in an existing local XML using JavaScript

Question

I have an existing XML file containing data like the following. I want to add a new book, with title, author, year and price.

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

Possible duplicate of Inserting an XML node using Javascript — hifebriansyah
– hifebriansyah, Commented Oct 16, 2019 at 20:02
@Jonathan Yes, actually I'm going to use an HTML form, but give me a solution with static data using Javascript and I'll figure it out. — Mohamed Khlifi
– Mohamed Khlifi, Commented Oct 16, 2019 at 20:12
I found many solutions via the search. This one looks promising — Jonathan
– Jonathan, Commented Oct 16, 2019 at 20:41

Nasira Mohamed Noufal · Accepted Answer · 2019-10-17 07:37:46Z

0

here,working code sample

 function XMUpdate() {
    try {
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    }
    catch (e) {  try { xmlDoc = document.implementation.createDocument("", "", null);  }
    catch (e) { }
    }
    try {
        xmlDoc.async = false;
        xmlDoc.load("C:/test.XML");
        newEle = xmlDoc.createElement("book");

        newEle1 = xmlDoc.createElement("Title");
        newText1 = xmlDoc.createTextNode("aaaa");
        newEle1.appendChild(newText1);
        newEle.appendChild(newEle1);

         newEle2 = xmlDoc.createElement("author");
        newText2 = xmlDoc.createTextNode("SSSSSS");
        newEle2.appendChild(newText2);
        newEle.appendChild(newEle2);

        newEle3 = xmlDoc.createElement("year");
        newText3 = xmlDoc.createTextNode("2019");
        newEle3.appendChild(newText3);
        newEle.appendChild(newEle3);

        newEle4 = xmlDoc.createElement("price");
        newText4 = xmlDoc.createTextNode("39.95");
        newEle4.appendChild(newText4);
        newEle.appendChild(newEle4);

        xmlDoc.getElementsByTagName("bookstore")[0].appendChild(newEle);
        xmlDoc.save("C:/test.XML");
    }
    catch (e) { alert(e.message) }
    return (null);
}

answered Oct 17, 2019 at 7:37

Nasira Mohamed Noufal

564 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mohamed Khlifi Over a year ago

It shows an alert saying "xmlDoc.load is not a function"

Nasira Mohamed Noufal Over a year ago

above code will work ony in Internet explorer(supports ActiveX controls).Google Chrome and Firefox web browsers do not support ActiveX controls by default.

Mohamed Khlifi Over a year ago

Still didn't work in Internet Explorer, it says "Object doesn't support property or method 'load'". Do you have a solution for Google Chrome, a translation to your code.

balderman · Accepted Answer · 2019-10-19 22:08:22Z

See below (adding a book and title). Hit the 'Demo' button

<!DOCTYPE html>
<html>
<head>
<script>
function demo() {
var parser, doc;
var text = `<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>`;

parser = new DOMParser();
doc = parser.parseFromString(text,"text/xml");

var book = doc.createElement("book");
book.setAttribute("category", "other");
book.setAttribute("cover", "nice");
let title = doc.createElement("title");
let title_txt = doc.createTextNode("the new title");
title.appendChild(title_txt);
book.appendChild(title)
doc.getElementsByTagName("book")[0].appendChild(book);

alert(new XMLSerializer().serializeToString(doc.documentElement))
}


</script>

</head>
<body>

<input type="button" onclick="demo()" value="Demo">


</body>
</html>

Collectives™ on Stack Overflow

Add a new element in an existing local XML using JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related