用javascript添加新的div元素[重复]答案

【问题标题】：adding new div element with javascript [duplicate]用javascript添加新的div元素[重复]
【发布时间】：2014-08-25 14:00:28
【问题描述】：

如何通过单击在 onclick() 上附加了 javascript 的按钮来添加相同的元素（具有相同的 id）（我目前没有 JS）？我考虑过使用 document.write，然后只添加一个 div，但对我来说没有用 + 我听说这是一种不好的做法。

到目前为止我所拥有的：

HTML：

<!DOCTYPE html/>
<html>
    <head>
        <title>wat</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="CssHtmlLapai.css">
        <script src="JsLapai.js"></script>
    </head>
    <body>
        <button type="button" onclick="NewDiv()">Click me</button>
        <div id="first"></div>
    </body>
</html>

CSS：

#first{
    width: 100px;
    height: 100px;
    background-color: red;
}

【问题讨论】：

多次使用相同的ID 确实是不好的做法。 ID 用作unique identifier。如果你想要一个通用标识符，你可以使用class
请贴出NewDiv()函数的代码。以便于帮助。
您能说得更具体些吗？应该在哪里添加div？直接在按钮之后？另外，不要多次使用同一个 ID，这不是一个好习惯。改用类。
@Mathlight - 也打败了我。
使用 document.write 并不是一个坏习惯，在这种情况下它是完全错误的。您不想编写新内容，而是想将内容添加到现有内容中。考虑使用 JQuery，这使得 DOM 操作非常容易。 api.jquery.com/append

标签： javascript html css

【解决方案1】：

使用document.createElement(tagName) 执行此操作。

DOC

function NewDiv() {
   var newDiv = document.createElement("div");

   document.getElementById("parentDivId").appendChild(newDiv);
}

【讨论】：

【解决方案2】：

我认为您正在寻找的是跨多个元素应用相同的 CSS。为此，您应该使用一个类而不是重复的 ID。（ID 本质上用作标识符，如果您尝试拥有多个 ID，javasript 会做出令人惊讶的事情）。

所以不要使用“id”，而是使用“class”

<!DOCTYPE html/>
<html>
    <head>
        <title>wat</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="CssHtmlLapai.css">
        <script src="JsLapai.js"></script>
    </head>
    <body>
        <button type="button" onclick="NewDiv()">Click me</button>
        <div class="first"></div>
    </body>
</html>

要定义一个类，您将使用 '.'前缀

.first{
    width: 100px;
    height: 100px;
    background-color: red;
}

然后在 JS 中你可以做类似...

<script>
    function NewDiv()
    {
        var newDiv = document.createElement("div");
        newDiv.className = "first";
        newDiv.id = "someotherid"; //not neccessary but probably useful
    }
</script>

【讨论】：

【解决方案3】：

使用以下代码：

HTML：

<!DOCTYPE html/>
<html>
    <head>
        <title>wat</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="CssHtmlLapai.css">
        <script src="JsLapai.js"></script>
    </head>
       <body>
            <button type="button" id="click-me">Click me</button>
            <div id="first" class="common-css"></div>
        </body>
</html>

CSS：

.common-css{
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript：

document.getElementById('click-me').onclick = function() {
   var newdiv = document.createElement('div');
   var firstdiv = document.getElementById('first');
   newdiv.setAttribute('class', 'common-css');
   firstdiv.appendChild(newdiv);
};

JSFiddle 链接：http://jsfiddle.net/vinoddalvi/u4H9h/

【讨论】：

【解决方案4】：

你可以使用jquery：

$('button').click(function() {
    $('#first').first().clone().appendTo('body');
});

http://jsfiddle.net/km8Wv/

【讨论】：