CODEWITHSUNDEEP
javascripthtml
ewitkows
ewitkows

Reputation: 3618

Script to embed HTML content on page

The scenario: My company wants to have a "content builder" on our customer portal. Using this content builder, the user can check off their requested content (example: about the company, about our products, etc.)

Once the options are selected, I want to provide the user with a script they can place on their website. When run, the parameters in the script will reach out, call our CMS for the appropriate copy, and return the markup.. which should display within their browser.

My question is.. how do I go about doing this? I know how to get the HTML from the CMS, but how do I write the data back into the DOM? Should I just embed an IFRAME? Can I just write out div tags and such onto the host website? Any advice is appreciated, thanks in advance.

Upvotes: 0

Views: 887

Answers (2)

Steve
Steve

Reputation: 166

You can create markup to insert into the page.

You could add an id attribute to the script tag that gets embedded into the external site and have them place the script tag exactly where you want the content to appear. 

<script id="myscripttag" src="..."></script>

then use some code like below to insert the markup before your script tag.

var insertMarkup = function(){  

var scripttag = document.getElementById('myscripttag'),

    YOURCONTENT = '<h1>hello</h1>',

    //parentNode of script tag
    p = scripttag.parentNode,

    //new element to hold your content
    n = document.createElement("div");

    n.id = 'mynewdiv';

    n.innerHTML = YOURCONTENT;

    p.insertBefore(n,scripttag);

};

Upvotes: 1

Nick Bailey
Nick Bailey

Reputation: 3162

While a little bit more about the specific content would be helpful, the basic idea will be to use the innerhtml property of the DOM element into which you will be placing content. For example if you have a div with an id of "contentbox" you could write:

var x = htmlstringfromcms();
document.getElementById("contentbox").innerhtml=x;

if you want to append, rather than overwrite the content of the element try

var x = htmlstringformcms();
document.getElementById("contentbox").innerhtml+=x;

Upvotes: 1

Related Questions