How can i create html elements dynamically? - Programmers Heaven

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

How can i create html elements dynamically?

First of all i'm still in the learning process and slowly trying to push myself to the next level in web development so please help me
____________________________________________________________
I'm making a small word document maker, it can make text dynamically and insert images dynamically too. but i cannot use a simple text area because i want to make it dynamically. i cannot insert images with a textbox. So i decided to make an iframe and made another html tag inside of it for the work area and i was planning to make the text and the inserting of images dynamically inside the iframe>html. But I don't have a clue and an idea how to do this. i know its possible creating the text and inserting images there but I don't know how to build them dynamically. I was thinking while typing its inserting html elements like paragraph tags and such.. can anyone help or give me an idea?

Comments

  • mac_doggiemac_doggie Posts: 488Member
    Hi,

    First of all I wouldn't use an iFrame. You can use a div tag and set contenteditable to true. Now you can edit the contents of the div.
    [code]

    [/code]

    To dynamically create an element you can use the createElement method of the document object:
    [code]
    var img = document.createElement('img');
    img.src = 'myImage.jpg'
    document.body.appendChild(img);
    [/code]

    After you created a new img tag you have to insert it in your document. That's what appendChild does. You could also insert it in your div with this code:
    [code]
    document.getElementById('test').appendChild(img);
    [/code]

    Hope you find this usefull

    -mac-
    ;-)
    -mac-
    mailto:mac_doggie@hotmail.com
    the Netherlands...
Sign In or Register to comment.