CODEWITHSUNDEEP
javascripthtml
Jacob
Jacob

Reputation: 23

What is the easiest way to add an element to html through javascript

It seems there are many ways to do this, however, none of them make sense to me. If anyone can give me an example of how to add a tag and edit its attributes (no document.write mess) that works in all common browsers BUT IE, that would be great.
EDIT
I simply do not care if it works in IE or not. If it does, fine but I dislike IE so much anyway I will just ask people to change browsers since other stuff on the page I am creating does not work in IE.

Upvotes: 1

Views: 113

Answers (5)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

Assuming you want to exclude all IE versions, using this trick from webreflection blog you could do

if (!(!+"\v1")) {
   var el = document.createElement("div");    
   ...
   document.body.appendChild(el);
}

Alternatively, another condition to detect IE could also be

if (!top.execScript) { ... }

or even

var isIE = /*@cc_on!@*/!1;
if (isIE) { ... }

but to be honest they're so hacky for me.
Anyway, if you specify the technical reason for excluding IE and tell us what kind of functionality are you trying to accomplish, probably it's possibile to give you a safer way to do this task, based on a specific IE limit (feature dection is better than browser sniffing).

Upvotes: 0

VisioN
VisioN

Reputation: 145398

Here is the easiest example of how to create a <div> element and add it to the layout.

var el = document.createElement("div");   // creating element
el.setAttribute("class", "myClass");      // setting attribute "class"
el.innerHTML = "Text";                    // adding text inside the element
document.body.appendChild(el);​            // appending new element to page body

DEMO: http://jsfiddle.net/XVaqY/

To make it not working in IE add any browser check. Something like that:

function isIE() {
    return (navigator.appName == "Microsoft Internet Explorer");
}

Upvotes: 3

Matt
Matt

Reputation: 3677

Here are a few methods to add content to the DOM:

Using the W3C recommended approach:

var heading = document.createElement("h1");
heading.createTextNode("Foobar");
heading.className = "semantic-class-name-goes-here";
heading.setAttribute("aria-something-here", "bar");

Using innerHTML:

document
    .innerHTML("<h1 class='semantic-class-name-goes-here' aria-something-here='bar'>Foobar</h1>");

Using jQuery:

var heading = $("h1")
    .addClass("semantic-class-name-goes-here")
    .attr("aria-something-here", "bar");

$(document).append(heading);

Upvotes: 0

dvir
dvir

Reputation: 5115

First, you create the element with document.createElement() and save it to a variable. At this point it is not in the DOM yet. Then, change its attributes as much as you like, and then insert it into the DOM at any point you like. In my example, it will insert a DIV element with the id of elementid into the end of the body tag.

var newDiv = document.createElement("div");
newDiv.id = "elementid";
document.body.appendChild(newDiv);

Upvotes: 0

Philip Kirkbride
Philip Kirkbride

Reputation: 22879

Here is a working example of adding a DIV with javascript

http://jsfiddle.net/wp2Re/

<html>  
<head>  
    <title>Javascript Create Div Element Dynamically</title>  
    <style type="text/css">  
        .dynamicDiv {  
            width: 200px;  
            height: 100px;  
            border: solid 1px #c0c0c0;  
            background-color: #e1e1e1;  
            font-size: 11px;  
            font-family: verdana;  
            color: #000;  
            padding: 5px;  
        }  
    </style>  

    <script type="text/javascript" language="javascript">  

        function createDiv() { 
            var divTag = document.createElement("div"); 

            divTag.id = "div1"; 

            divTag.setAttribute("align", "center"); 

            divTag.style.margin = "0px auto"; 

            divTag.className = "dynamicDiv"; 

            divTag.innerHTML = "This HTML Div tag created "  
                                + "using Javascript DOM dynamically."; 

            document.body.appendChild(divTag); 
        } 
    </script>  
</head>  
<body>  
    <p align="center">  
        <b>Click this button to create div element dynamically:</b>  
        <input id="btn1"   
                type="button"   
                value="create div"   
                onclick="createDiv();" />  
    </p>  
</body>  
</html>

Upvotes: 0

Related Questions