Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Component that traverses/walks the DOM of rendered page

Avatar

Level 4

How should I go about creating a component that is able to walk the DOM tree for whichever page it is included on, locate certain HTML elements, and then modify/update or inject HTML on the page. It would essentially be updating or injecting HTML of the existing page, (i.e. of page you drag the component onto). I might need to use the same component to include other components on the page as well. What are the steps to accomplish this?

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi 

To achieve the same, you would need to create a costume logic as stated by Scott. 

1. Create a "pathField widget with search" and read the content of specified page that you would like to change or modify (Link:- http://experience-aem.blogspot.in/2014/03/aem-cq-56-pathfield-widget-with-search.html).

2. Use JavaScript or Java code to read the page and parse DOM tree of the same. (http://api.jquery.com/jquery.parsehtml/, http://jsoup.org/ etc)

3. Many java-script plugins are available to modify the web content in-place, use them to modify the content. You can even create a section in the dialog box that can help you in previewing added/modified code. (Like Source code option in RTE).

I hope this would help you.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

View solution in original post

2 Replies

Avatar

Correct answer by
Administrator

Hi 

To achieve the same, you would need to create a costume logic as stated by Scott. 

1. Create a "pathField widget with search" and read the content of specified page that you would like to change or modify (Link:- http://experience-aem.blogspot.in/2014/03/aem-cq-56-pathfield-widget-with-search.html).

2. Use JavaScript or Java code to read the page and parse DOM tree of the same. (http://api.jquery.com/jquery.parsehtml/, http://jsoup.org/ etc)

3. Many java-script plugins are available to modify the web content in-place, use them to modify the content. You can even create a section in the dialog box that can help you in previewing added/modified code. (Like Source code option in RTE).

I hope this would help you.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 4

kautuksahni wrote...

Hi 

To achieve the same, you would need to create a costume logic as stated by Scott. 

1. Create a "pathField widget with search" and read the content of specified page that you would like to change or modify (Link:- http://experience-aem.blogspot.in/2014/03/aem-cq-56-pathfield-widget-with-search.html).

2. Use JavaScript or Java code to read the page and parse DOM tree of the same. (http://api.jquery.com/jquery.parsehtml/, http://jsoup.org/ etc)

3. Many java-script plugins are available to modify the web content in-place, use them to modify the content. You can even create a section in the dialog box that can help you in previewing added/modified code. (Like Source code option in RTE).

I hope this would help you.

 

Thanks and Regards

Kautuk Sahni

 

 

Thanks, but the code/logic of the component will be doing all of the HTML modification, in one case, placing the appropriate analytics tags in the page right before the </body> tags, and in others, injecting code at the very top of the page, the very bottom, right after a specific element etc., or even locating an element and changing an attribute. Everything will be done by the code as opposed to having the author paste snippets into a dialog manually, (as the component will be getting some snippets from other systems and/or a database).