Question

我正在尝试在页面正文中创建此<div id="myid" >Hello Wordl!</div>，但我的代码问题是，在等待10秒后，它会将此<div id="myid" >Hello Wordl!</div>替换为我的页面的全部内容，因此它只会显示这个div。

这是我的javascript代码

 <script>
    setTimeout(function(){        
   $("body").prepend("<div id='myid'>hello world</div>");
},10000);
    },10000);
    </script>

and my page is like this

    <html>
    <head>
    <style type="text/css">
        body {margin:0;padding:0;}
    </style>
        <title></title>
    </head>
    <body>

    <script>
    setTimeout(function(){        
    $("body").prepend("<div id='myid'>hello world</div>");
    },10000);
    </script>

    <!-- New div created by javascript must be here -->

    <div id="1">Keep This Div</div>

    </body>
    </html>

Answer 1

您的代码中没有任何内容被覆盖。你试图创建元素（以错误的方式）并且不做任何事情。

＆＃13;

<div id="id1">Keep This Div</div>

<script>
  setTimeout(function() {
    var el = document.createElement('div');
    el.id = 'myid';
    el.innerHTML = 'Hello World!';

    document.getElementById('id1').prepend(el);
  }, 2000);
</script>

＆＃13;

请注意，id="1"是无效的值，我在我的示例中将其更改为id1。

Answer 2

如果你想在你的html体中添加一个元素，你可以创建它，然后像这样追加它：

var elemDiv = document.createElement('div');
document.body.appendChild(elemDiv);

然后您可以通过Javascript添加属性和innerHTML，如下所示：

elemDiv.id = 'myid';
elemDiv.innerHTML = 'Hello World!'

Answer 3

工作代码

<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<style type="text/css">
    body {margin:0;padding:0;}
</style>
    <title></title>
</head>
<body>

<script>
setTimeout(function(){      

$("body").prepend("<div id='myid'>hello world</div>");
},10000);
</script>

<!-- New div created by javascript must be here -->

<div id="1">Keep This Div</div>

</body>
</html>

javascript document.ready正在取代整个内容问题

3 个答案: