insert image when button is clicked html javascript

Question

I am creating an Office 2013 app, using HTML & Javascript. I want to include one feature in the app, i.e., when the User clicks a certain button, the corresponding image gets inserted in the document. I tried this method..

HTML:

<button id="img-insert-btn">Insert Image</button>

jQuery:

$('#img-insert-btn').click(insertImage);

Javascript:

function insertImage() {
Office.context.document.setSelectedDataAsync("../ImageFolder/Image.png");
}

The method I wrote above, inserts that file path into the document, instead of inserting the image. Please help. P.S. jQuery can also be implied.

Answer 1

Javascript:

var imgHTML = "<img " +
"src='http://i.msdn.microsoft.com/fp123580.AppHome2(en-us,MSDN.10).png'"
+ " alt ='apps for Office image' img/>";

function setHTMLImage(imgHTML)
    {
        Office.context.document.setSelectedDataAsync(
            imgHTML, { coercionType: "html" },
            function (asyncResult) {
                if (asyncResult.status == "failed") {
                    write('Error: ' + asyncResult.error.message);
                }
            });
    }

Answer found here by @guli

Answer 2

Do this like that:

$(document).ready(function(){
    $('button').click(function(){
        $('body').append('<img src="http://www.gratuit-en-ligne.com/telecharger-gratuit-en-ligne/telecharger-image-wallpaper-gratuit/image-wallpaper-animaux/img/images/image-wallpaper-animaux-autruche.jpg">');
    });
})

Fiddle demo.