Can't replace a confluence page text using getElementById and Ajax

[Daniel Baron]

I want to replace text whose HTML tag has id equal to a variable called skillLevel (the text can just be part of a confluence page or part of an HTML macro embedded in a page, whatever's easier). However there's something wrong with this line 

existing_body.getElementById(skillLevel).innerHTML = skillString;
    }

in the code below, as evidenced by the fact that 

existing_body.getElementByTagName("p")

won't even work when I try it. Is the existing_body not getting recognized as HTML for some reason? 

function myFunction() {
 var users_name = document.getElementById("users_name").value;
 var email = document.getElementById("email").value;
 inputs = document.getElementsByTagName('select');

 for (i = 0; i < inputs.length; i++) {
     input = inputs[i];
     if (input.value.length > 1) {
     var skillString = "<p> " + users_name + " - " + input.value + " - " + email + '</p>';
     var skillName = input.name;
     var skillLevel = input.value;	
     $.get('/rest/api/content?spaceKey=EXPERTISE&title=' + skillName + '&expand=space,body.storage,version,container', function (data, status) {
         var pageData = data.results[0];
	 var existing_body = pageData.body.storage.value; 
	 var foundin = existing_body.search(email);
	 if (foundin > 0) {
           alert("You have already added the skill: " + skillName);
         } else {
	   pageData.version.number += 1;
           var page_id = pageData.id;
	   existing_body.getElementById(skillLevel).innerHTML = skillString;
    }
    $.ajax({
      type: "PUT",
      url: "/rest/api/content/" + page_id,
      data: JSON.stringify(pageData),
      contentType: "application/json; charset=utf-8",
      success: function (data) {
        alert("Successfully added info");
      },
      error: function (data) {
        alert("Error - could not complete request");
      }
    });
 
   });
  }
 }
}

[Davin Studer · Accepted solution]

getElementById is a method on the document class. You don't get that method with data returned from a jQuery Ajax call. Specifically, you are getting a JSON object from that Ajax call. If you want to modify the html in the returned string you will have to use a method such as this ...

https://stackoverflow.com/questions/7904480/jquery-modify-html-string

https://blog.slaks.net/2011/01/modifying-html-strings-using-jquery.html

[Daniel Baron]

The second seems like the right candidate, particularly the part about needing to retrieve html from the DOM tree after modifying the source html, then assign that source back to the variable.  Thanks.

[Davin Studer]

Glad to help.

[Lisbon Cruz]

I know this is an old thread but were you able to get this to work? I am trying to change the text from span class = fc-event-title (it's teams calendar) to be able to just pull some strings. Our teams calendar pulls the jira ticket info but the summary field has a lot of unecessary information that upper management do not want to see. Thank you for any help and guidance you can provide. I created a question in this post for more information. 

Confluence Team Calendar Jira Issue Dates Custom V... (atlassian.com)