locked
Put string of HTML onto DOM RRS feed

  • Question

  • User-1153360433 posted

    I have an application that can have a dynamic amount of instances of an HTML template. In order to create uniqueness I am loading the HTML template into a string and then modify the necessary elements and add the relevant javascript needed inline. When done I have an array of strings of HTML/javascript. At this point I need to load these onto the DOM. I have tried creating a unique element using createElement and then use insertAdjacentElement but insertAdjacentElement expects a group of elements. Can this be done and if so can you please point me in the right direction. 

    Monday, August 20, 2018 4:41 PM

All replies

  • User283571144 posted

    Hi EdwardAV,

    n order to create uniqueness I am loading the HTML template into a string and then modify the necessary elements and add the relevant javascript needed inline. When done I have an array of strings of HTML/javascript. At this point I need to load these onto the DOM. I have tried creating a unique element using createElement and then use insertAdjacentElement but insertAdjacentElement expects a group of elements. Can this be done and if so can you please point me in the right direction. 

    As you says the insertAdjacentElement could only add one element to the DOM. It doesn't support a group of elements.

    In my opinion, you could write a for loop for all the array of strings of HTML/javascript.

    Then you could create the element according to the array and use the insertAdjacentElement element into the DOM.

    Like this:

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-1.9.1.min.js"></script>
     </head>
    <body>
        <h1>Demonstration</h1>
        <div id="div1">The text above has been created dynamically.</div>
        <script>
            window.onload = function () {
                str1 = "p";
                str2 = "div";
                var arraystr = [];
                arraystr.push(str1);
                arraystr.push(str2);
                for (var i = 0; i < arraystr.length; i++) {
                    var tempElement = document.createElement(arraystr[i]);
                    var targetdiv = document.getElementById("div1");
                    //add the innerhtml
                    tempElement.innerHTML += 'Test';
                    targetdiv.insertAdjacentElement('beforebegin', tempElement);
                 }
            }
        </script>
    
        
    </body>
    </html>
    

    But insertAdjacentElement will not add the javascrip codes well.

    I suggest you could consider using jquery append function to achieve your requirement.

    We could directly write the html element in a string array, then you could add it dynamic by using the append function.

    More detaisl, you could refer to below codes:

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </head>
    <body>
        <h1>Demonstration</h1>
        <div id="div1">The text above has been created dynamically.</div>
        <script>
            window.onload = function () {
                str1 = "<p>hello friend</p>";
                str2 = "<script type='text/javascript'>alert('hello world!');<\/script>";
                var arraystr = [];
                arraystr.push(str1);
                arraystr.push(str2);
                for (var i = 0; i < arraystr.length; i++) {
                    $('#div1').append(arraystr[i]);
                }
    
            }
    
        </script>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    Wednesday, August 22, 2018 2:51 AM