There is open source (client side) which I can use to extend HTML, for example I need to add scripts to it or change some of the src values and add additional tags, etc.

I found the following: https://www.npmjs.com/package/gulp-html-extend

but I'm not sure if I can use it in the client (we don't use gulp in our project) By client I mean for example to use it in jsFiddle.

The input should be HTML content with some object/json with the new content and the output should be extended HTML.

If there is no open source , and I need to develop it myself, is there is some guide line I should follow from good design aspects?

UPDATE:

For example if I've the following HTML doc as JS input variable

THIS IS THE INPUT WHICH I GOT AS STRING

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">

        <title>td</title>

        <script id="test-ui-bootstrap"
            src="resources/test-ui-core.js"
            data-test-ui-libs="test.m"
            data-test-ui-xx-bindingSyntax="complex"
            data-test-ui-resourceroots='{"tdrun": "./"}'>
        </script>

        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script>
            test.ui.get().attachInit(function() {
            });
        </script>
    </head>

    <body class="testUiBody" id="content">
    </body>

</html>

For example I need the following:

1.

I want to add additional script (e.g. with alert inside) after

<script id="test-ui-bootstrap" ....

if there is in the file script with id "test-ui-bootstrap"

I want to add immediately after this script another script e.g.

script with alert inside

2.

To add additional property inside the first script(with id id="test-ui-bootstrap") after the last script...

data-test-ui-libs="test.m"

To add

data-test-ui-libs123 ="test.bbb"

3.

If I want to modify the value of existing property e.g. change

src="resources/test-ui-core.js"

src="resources/aaaa/test-ui-core.js"

I got string with HTML and I need to create new string with the modified HTML I can I do it right with nice way?

UPDATE 2

THIS IS THE OUTPUT AFTER THE HTML WAS CHANGED

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta charset="UTF-8">

            <title>td</title>

            <script id="test-ui-bootstrap"
                src="resources/aaaa/test-ui-core.js"
                data-test-ui-libs="test.m"
                data-test-ui-libs123 ="test.bbb"
                data-test-ui-xx-bindingSyntax="complex"
                data-test-ui-resourceroots='{"tdrun": "./"}'>
            </script>
            <script>
               alert("test)
            </script>

            <link rel="stylesheet" type="text/css" href="css/style.css">

            <script>
                test.ui.get().attachInit(function() {
                });
            </script>
        </head>

        <body class="testUiBody" id="content">
        </body>

    </html>

Extend HTML file with script and override/extend some section tags

1.

2.

3.

3 Answers