Question

如何通过单击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;
}

Answer 1

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

DOC

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

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

Answer 2

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

所以不是＆＃39; id＆＃39;使用＆＃39; class＆＃39;

<!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>

要定义课程，您将使用＆＃39;。＆＃39;前缀

.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>

Answer 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/

Answer 4

你可以使用jquery：

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

http://jsfiddle.net/km8Wv/

用javascript添加新的div元素

4 个答案: