1

似乎有很多方法可以做到这一点，但是，它们对我来说都没有意义。如果有人可以给我一个示例，说明如何添加标签并编辑其在所有常见浏览器（但IE 除外）中都可以使用的属性（没有 document.write 混乱），那就太好了。
编辑
我根本不在乎它是否适用于 IE。如果是这样，那很好，但我非常不喜欢 IE，我只会要求人们更改浏览器，因为我正在创建的页面上的其他内容在 IE 中不起作用。

4

5 回答 5

3

下面是如何创建<div>元素并将其添加到布局的最简单示例。

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

演示：http: //jsfiddle.net/XVaqY/

要使其在 IE 中不起作用，请添加任何浏览器检查。类似的东西：

function isIE() {
    return (navigator.appName == "Microsoft Internet Explorer");
}
于 2012-06-15T15:19:42.483 回答
0

这是使用 javascript 添加 DIV 的工作示例

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>
于 2012-06-15T15:20:21.767 回答
0

首先，您创建元素document.createElement()并将其保存到变量中。此时它还没有在 DOM 中。然后，随心所欲地改变它的属性，然后在你喜欢的任何时候将它插入到 DOM 中。在我的示例中，它将在标签末尾插入一个带有of的DIV元素。idelementidbody

var newDiv = document.createElement("div");
newDiv.id = "elementid";
document.body.appendChild(newDiv);
于 2012-06-15T15:20:49.950 回答
0

以下是向 DOM 添加内容的几种方法：

使用 W3C 推荐的方法：

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

使用innerHTML：

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

使用 jQuery：

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

$(document).append(heading);
于 2012-06-15T15:27:26.097 回答
0

假设您想排除所有 IE 版本，使用webreflection 博客中的这个技巧，您可以做到

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

或者，检测 IE 的另一个条件也可以是

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

甚至

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

但老实说，他们对我来说太老套了。
无论如何，如果您指定排除 IE 的技术原因并告诉我们您要完成什么样的功能，可能会根据特定的 IE 限制为您提供一种更安全的方式来完成此任务（功能检测优于浏览器嗅探）。

于 2012-06-15T15:40:14.763 回答