Script for replacing DOM content

[Edward Sharapoff]

In the CMS system, users create pages in the content of which there are inserts with video players in addition to the text.
The structure is as follows:

<div class="container"> <h2>Header</h2> <h4>Subtitle 1</h4> <div id="player1"></div> <p> </p> <h4>Subtitle 2</h4> <div id="player2"></div> <p> </p> </div> <script>   new Playerjs({id:"player1", file:"https://www.youtube.com/embed/videoId_1 "});   new Playerjs({id:"player2", file:"https://www.youtube.com/embed/videoId_2 "}); </script>

For an untrained user who does not understand the layout, replacing the codes in the right places of the HTML code is difficult and not understandable.
Task: simplify the work by bringing the content to this form:

<div class="container"> <h2>Header</h2> <h4>Subtitle 1</h4> <p>[videoId_1]</p> <p> </p> <h4>Subtitle 2</h4> <p>[videoId_2]</p> <p> </p> </div>

that is, in the visual editor, he sees the headline texts that he understands and the place where the video should be located:

Heading Subtitle 1 [videoId_1] Subtitle 2 [videoId_2] ...

Can you tell me which way to dig for the implementation of the plan in javascript?
Perhaps there are already some libraries, templating tools or solutions for this kind of tasks.
I.e., in fact, you need to replace the DOM content of the page from the editor with your own code when viewing such a page.

[Roland Mueller]

Welcome to Coderanch!

As following site demonstrates there is a HTML property named innerHTML that can be used to retrieve or set the content of some element in DOM tree.

https://www.w3schools.com/js/js_htmldom_methods.asp

In your case you would get the DOM element with id "player1" and replace its content with the code defining a video player.

document.getElementById("player1").innerHTML = "<.../>"

[Edward Sharapoff]

Roland Mueller wrote:Welcome to Coderanch!

document.getElementById("player1").innerHTML = "<.../>"

Hi Roland!

That's not exactly what I meant. I know how to use innerHTML. I already have javascript code that is ready for use with innerHTML
Now I need a parser that will extract and get all the values from the structure.:

Heading Subtitle 1 [videoId_1] Subtitle 2 [videoId_2] ...
and then get the data object:

{ player: [{ title: "Subtitle 1", videoID: "videoId_1"}, { title: "Subtitle 2", videoID: "videoId_2"},] }

[Roland Mueller]

Second trial to check whether I got your point:

Parsing of HTML code has been already done by JavaScript. Instead you could retrieve the first element of given class by using  getElementsByClassName() and then loop through its children.
In my code - that's just a starting point - I just print out the HTML tagName and the text content of the element.

       let con = document.getElementsByClassName("container")[0]            //console.log("container.children", con.children)                for (let k of con.children) {            console.log(k.tagName, k.innerText)           /*             Writing code for adding data into return object left to the reader ...            Probably, some case check structure:              if tag is <h4> create new entry to array and add subtitle             if tag is <p> then add video URL             ...          */        }

Example code from OP's post:

<div class="container"> <h2>Header</h2> <h4>Subtitle 1</h4> <p>[videoId_1]</p> <p> </p> <h4>Subtitle 2</h4> <p>[videoId_2]</p> <p> </p> </div>

Output I see in Firefox console:

H2 Header H4 Subtitle 1 P [videoId_1] P <empty string> H4 Subtitle 2 P [videoId_2] P <empty string>