Question

我只是不明白。下面的代码完全适用于JSFIDDLE，但不在我的页面上。代码在DIV中添加了所有内容的副本。这是工作JSFIDDLE的链接：https://jsfiddle.net/zv98a60m/1/

JS：

document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}

HTML的一部分：

<body>
<script src="add.js" language="Javascript" type="text/javascript"></script>

<div class="wrapper">
                <button id="button" onlick="duplicate()">Click me</button>

    <div id="duplicater">   
        <div id="box-margin">   
            <div id="discussion-box">
            </div> <!-- Ends discussion-box -->
        </div> <!-- Ends box-margin -->
    </div>      


            <div id="circle">
                    <div class="cross">
                        <div class="cross2">
                        </div> <!-- Ends cross2 -->
                    </div> <!-- Ends cross -->
                </div> <!-- Ends circle -->

JS文件名正确等。

Answer 1

唯一错误的是，你过早地包含了你的javascript。尝试如下，然后它将工作。

为什么它在js小提琴上工作？因为jsfiddle包含最后的javascript，或等到所有内容都被加载，如其他答案所示。

<body>


    <div class="wrapper">
                    <button id="button" onlick="duplicate()">Click me</button>

        <div id="duplicater">
            <div id="box-margin">
                <div id="discussion-box">

                  <p>This is the required change</p>

                </div> <!-- Ends discussion-box -->
            </div> <!-- Ends box-margin -->
        </div>


        <div id="circle">
                <div class="cross">
                    <div class="cross2">
                    </div> <!-- Ends cross2 -->
                </div> <!-- Ends cross -->
            </div> <!-- Ends circle -->

    </div>

    <!-- include your javascript always just before -->
    <!-- the closing </body> tag -->
    <!-- if as file make sure the path is correct -->
    <!-- <script src="add.js"></script> -->
    <script>


        document.getElementById('button').onclick = duplicate;
        var i = 0;
        var original = document.getElementById('duplicater');

        function duplicate() {
            var clone = original.cloneNode(true); // "deep" clone
            clone.id = "duplicetor" + ++i; // there can only be one element with an ID
            original.parentNode.appendChild(clone);
        }


    </script>
</body>

Answer 2

将您的HTML更改为：

  <style type="text/css">
    .wrapper {
    width: 100%;
  }

  #discussion-box{
    width: 50%;
    margin: 0 auto;
    height: 200px;
    background-color: #000;
    position: relative;
  }

  #box-margin {
    margin-top: 20px;
  }
  </style>
    <body>
    <script src="add.js" language="Javascript" type="text/javascript"></script>

    <div class="wrapper">
                    <button id="button" onlick="duplicate()">Click me</button>

        <div id="duplicater">   
            <div id="box-margin">   
                <div id="discussion-box">

                  <p>This is the required change</p>

                </div> <!-- Ends discussion-box -->
            </div> <!-- Ends box-margin -->
        </div>      


        <div id="circle">
                <div class="cross">
                    <div class="cross2">
                    </div> <!-- Ends cross2 -->
                </div> <!-- Ends cross -->
            </div> <!-- Ends circle -->

    </div>
    </body>

唯一需要做的改变是在div中添加内容＆＃34; duplicater＆＃34;它可以被克隆

Answer 3

将你的js代码放在以下函数中......

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

适用于JSFIDDLE但不适用于.html

3 个答案: