Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Component that traverses/walks the DOM of rendered page

au4liferz
Level 4
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
kautuk_sahni
Correct answer by
Employee
Employee

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

View solution in original post

2 Replies
kautuk_sahni
Correct answer by
Employee
Employee

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

au4liferz
Level 4
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).