0

Please help and suggest new to aura components, how to write document.body.append in aura components. I have one components which loads from static resources and i'm calling method from static resources where one line is document.body.append which is not a function

 const newContent = document.CreateElement('config');

  document.body.append(newContent);

also i could see only [object HTMLBodyElement]{ key: {"namespace":"c"} } How to resolve the issue.

<div class='container'  style="background-color: #fff !important">   
          <ltng:require scripts="{!$Resource.Sample}" /> 
        <ui:button press="{!c.btn}">Click</ui:button>
     </div>

in Sample.js file

 window.loadInitialMethod = function() {
    const newNode = document.createElement("New-Class");
    document.append.body(newNode);
    }

in controller

({
    btn: function(component, event, helper) {
        loadInitialMethod ();
    }
})
4

1 Answer 1

0

You need to use the appendChild() method instead of the append.

appendChild() method: The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node.

Documentation: appendChild

I have used your code and done some modifications and it appends the element into the body element.

CMP HTML:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <div class='container'  style="background-color: #fff !important">   
        <ltng:require scripts="{!$Resource.Sample}" /> 
        <ui:button press="{!c.btn}">Click</ui:button>
    </div>
</aura:component>

CMP JS:

({
    btn: function(component, event, helper) {
        console.log("Called..Js");
        loadInitialMethod();
    }
})

Sample.js(Static Resource):

window.loadInitialMethod = function() {
    console.log("Called external JS");
    const newNode = document.createElement("div");
    newNode.innerHTML = "Test Div";
    console.log("New Element=>"+newNode);
    document.body.append(newNode);  
    console.log("New Element Append=>"+document.body.childNodes);
} 

Output: enter image description here

Console Log: enter image description here

PS: Output with New-Class Element: enter image description here

6
  • THanks for the reply . but my component is not loaded .
    – New Learnr
    Aug 3, 2023 at 11:59
  • Have you updated your code according to the above code which I have provided? Aug 3, 2023 at 12:11
  • yes but New-Class nothing is loaded.
    – New Learnr
    Aug 3, 2023 at 12:28
  • When i have use this JS it is working. window.loadInitialMethod = function() { console.log("Called external JS"); const newNode = document.createElement("New-Class"); newNode.innerHTML = "Test Div"; console.log("New Element=>"+newNode); document.body.appendChild(newNode); console.log("New Element Append=>"+document.body.childNodes); } Aug 3, 2023 at 12:45
  • Make sure you are using the appendChild method not an append method. I have added the new screenshot of the New-Class Element. Aug 3, 2023 at 12:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .