How to append a text in a existing file's specific location?

Hi.

I’m developing something. below is the scheme.

  1. User click button
  2. My app write a XML file(using Ionic native fileWrite method)
  3. If the user click that button once, then the XML file is like below:
<FILES>
	<FILE>
		<FileName>test.txt</FileName>
	</FILE>
</FILES>
  1. If the user click other button, app lists the list of FileName
    ex) alert(fileList[0]);

For this steps, I wrote codes like below:

(this method is called when user click the Step 1 button)

    writeListMeta() {
        var parser: any = new X2JS();
        var temp: any;

        temp = {
            "FILES":
                {
                    "FILE": {
                        "FileName": 'test.txt'
                    }
                }
        }
        let content = parser.js2xml(temp);
        this.file.writeFile(this.path, 'file.xml', content, { append: true, replace: false })
            .then(_ => alert('success'))
            .catch(err => alert('err : ' + err));
    }

and below method is called when user click Step 4 button:

  parserFileList() {
    alert('here');
    var parser: any = new X2JS();
    var content: any;
    var fileList = [];
    this.file.readAsText(this.filePath, this.fileName)
      .then(str => {
        content = parser.xml2js(str);
        for (let i = 0; i < content["FILES"]["FILE"].length; i++) {
          fileList[i] = content["FILES"]["FILE"][i]["FileName"];
          alert(fileList[i]);
        }
      })
      .catch(err => alert('err : ' + err))
  }

As you already recognize the problem, In this situation, if user click Step 1 button one more time, then the XML file will be like below:

<FILES>
	<FILE>
		<FileName>test.txt</FileName>
	</FILE>
</FILES>
<FILES>
	<FILE>
		<FileName>test.txt</FileName>
	</FILE>
</FILES>

Even if I want the XML file like below:

<FILES>
	<FILE>
		<FileName>test.txt</FileName>
	</FILE>
	<FILE>
		<FileName>test.txt</FileName>
	</FILE>
</FILES>

So, I’m wondering how to append a text in a existing file’s specific location.

At first, I just designed the xml structure that has no like below:

	<FILE>
		<FileName>test.txt</FileName>
	</FILE>
	<FILE>
		<FileName>test.txt</FileName>
	</FILE>

then other methods will be changed like below:

    writeListMeta() {
        var parser: any = new X2JS();
        var temp: any;

        temp = {
            "FILE": {
                "FileName": this.fileName
            }
        }
        let content = parser.js2xml(temp);
        this.file.writeFile(this.path, 'file.xml', content, { append: true, replace: false })
            .then(_ => alert('success'))
            .catch(err => alert('err : ' + err));
    }
  parserFileList() {
    alert('here');
    var parser: any = new X2JS();
    var content: any;
    var fileList = [];
    this.file.readAsText(this.filePath, this.fileName)
      .then(str => {
        content = parser.xml2js(str);
        for (let i = 0; i < content["FILE"].length; i++) {
          fileList[i] = content["FILE"][i]["FileName"];
          alert(fileList[i]);
        }
      })
      .catch(err => alert('err : ' + err))
  }

But then, it gives me an error like this.

capture

I think this is about the XML structure’s problem, so I would like to solve this problem with the way that appending a text in a existing file’s specific location.

Any solution?