Question

我需要通过JS在现有div中添加div。我正在使用下面的代码，但它无效。

HTML：

<div id="hashtag-content-footer">

JS：

<script type="text/javascript"> 
$("#hashtag-content-footer").append("<div id='newid'></div>");
</script>

请帮忙。

Answer 1

尝试写入$(document).ready事件：

<script>
    $(document).ready(function(){
      $("#hashtag-content-footer").append("<div id='newid'></div>");
    });
</script>

加载整个$(document).ready时会触发

DOM事件。因此，当整个DOM准备好被操作时，您的代码就会执行。

Answer 2

您似乎在JavaScript和jQuery之间感到困惑。

jQuery是一个JS插件，可以帮助您操作DOM元素。您尝试使用jQuery执行的代码，您需要将其添加到您的页面。

您可以从此处获取：jQuery Download

如果这不是问题，那么您发布的代码似乎缺少div的结束标记。

应该是：

<div id="hashtag-content-footer"></div>

Answer 3

代码问题：

没有任何内容提供给div，因此它不会被显示，但它会在那里。

所以给div的内容或高度或边框。将您的脚本放在$(document).ready()

html变为：

<div id="hashtag-content-footer">Test</div>

JS成为：

$(document).ready(function(){
    $("#hashtag-content-footer").append("<div id='newid'>ABC</div>");
});

请参阅小提琴：“http://jsfiddle.net/bzb4um1b/”

Answer 4

首先创建新的div是有帮助的。 var newDiv = document.createElement ("DIV"); 然后将该元素追加到现有的div

existingDiv.appendChild(newDiv);

Answer 5

在你的剧本中试试这个。

$( document ).ready(function() { 
    $("#hashtag-content-footer").append("<div id='newid'></div>"); 
});

记得设置一些边框和宽度，其他div将不可见。

经验：

$（document）.ready将确保dom已准备好进行操作。仔细阅读here

Answer 6

根据您的代码，您没有包含jquery文件。要么包含CDN，要么下载jquery的.js文件并包含它。

Answer 7

你有没有使用这个，因为你的代码工作正常

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 8

希望本规范能为您提供帮助。它会添加<DIV> 唯一ID

Html代码

<div id="divContainer">
</div>

<button type="button" id="btnClick">Click Me! </button>

JS代码

var counter = 0;
$("#btnClick").on("click",function(){
    counter = counter + 1;
    $("#divContainer").append("<div id='newid"+counter+"'></div>");
});

在这里工作小提琴。 JSFiddle for adding Dynamically

在现有div中添加带有Id的新div

8 个答案: