correct syntax for pure javascript

Question

I have this code:

function render(str)
{
    var main = document.createElement('div');
    with(main.style)
    {
          //style stuff here
    }

    main.appendChild(document.createTextNode(str));
    document.body.appendChild(main);

    setTimeout(function(){
        try{
            document.body.removeChild(main);
        }   catch(error){}
    },5000);
}

This render a message inside a div, an then hides after 5 secs.

How I can add a input text and image to this form? Since I'm not sure how I can do with pure JS.

Your code already shows how to do it, in the sense that adding an input is done the same way as adding a div (and you're already adding a div). — nnnnnn
– nnnnnn, Commented Mar 1, 2012 at 2:58

Community · Accepted Answer · 2017-05-23 11:48:01Z

2

Something like this:

input

var input = document.createElement("input");
input.type = "text";
input.name = "person";

document.body.appendChild(input);

image img = document.createElement("img"); img.src = "logo.png";

document.body.appendChild(img);

See live example here:

http://jsfiddle.net/sM2Vd/

I would suggest, however, learning and using something like jQuery - it's a great library that makes things like this a breeze.

See this SOq for a similar thing - creating input (type hidden in this case) element with jQuery and compare to plain JavaScript:

Jquery - Create hidden form element on the fly

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Mar 1, 2012 at 2:51

icyrock.com

28.7k4 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

greenbandit Over a year ago

I can do with jQuery, but pure JS is my next step :)

greenbandit Over a year ago

the code works, but i need to put inside the div created before, any ideas?

icyrock.com Over a year ago

Sure - just append to main instead of document.body, here's an updated jsFiddle: jsfiddle.net/sM2Vd/2

greenbandit Over a year ago

That works like a charm. I appreciate your time, keep rockin'!

slebetman Over a year ago

I would suggest you please remove your comments about jQuery. The OP is obviously a jQuery programmer, he's asking how to do it without jQuery since he's never programmed without jQuery.

|

kennebec · Accepted Answer · 2012-03-01 04:18:01Z

0

Instead of using

with(main.style)
    {
          //style stuff here
    }

and doing several style manipulations,

write all the style assignments in one go

main.style.cssText='//css style string here

answered Mar 1, 2012 at 4:18

kennebec

105k32 gold badges109 silver badges127 bronze badges

Collectives™ on Stack Overflow

correct syntax for pure javascript

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related