用javascript添加新的div元素[重复]
Posted
技术标签:
【中文标题】用javascript添加新的div元素[重复]【英文标题】：adding new div element with javascript [duplicate] 【发布时间】：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
【参考方案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/
【讨论】：
以上是关于用javascript添加新的div元素[重复]的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript中，可以用元素的innerHTML直接添加子元素吗？