What is the easiest way to add an element to html through javascript
Question
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 IE, that would be great. IE浏览器，这将是很棒的。
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.
5 answers
solution1
3 ACCPTED 2012-06-15 15:19:42
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");
}
solution2
0 2012-06-15 15:20:21
Here is a working example of adding a DIV with javascript
<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>
solution3
0 2012-06-15 15:20:49
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);
solution4
0 2012-06-15 15:27:26
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);
solution5
0 2012-06-15 15:40:14
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.