Question

我有一个简单的问题。我想使用createElement方法将一个元素添加到html div标签中。我尝试了很多不同的方法，但总是得到相同的结果 - 没有任何反应。

这是我的代码：

＆＃13;

function changeReleaseDate() 
{
    var parentElement = document.getElementByClassName("container body-content");
	var existingElement = document.getElementByClassName("btn btn-default");
	var newInput = document.createElement("input");
    newInput.type = "text";
    newInput.className = "form-control";
	parentElement.insertBefore(newInput, existingElement);
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
	<script src="script.js"></script>
</head>
<body>
    <div class="container body-content">
	    <h2>Index</h2>
		<button id="btn" type="button" onclick="changeReleaseDate()" class="btn btn-default">Default</button>
		<hr />
        <footer>
            <p>&copy;My ASP.NET Application</p>
        </footer>
    </div>
</body>
</html>

＆＃13;

我也尝试使用appendChild，但在这种情况下，输入字段被放在div之外。

Answer 1

问题是getElementByClassName应为getElementsByClassName。

此方法返回HTMLCollection，因此要访问此列表中的第一个元素，您需要使用索引为0的括号：

var parentElement = document.getElementsByClassName("container body-content")[0];
var existingElement = document.getElementsByClassName("btn btn-default")[0];

演示： http://jsfiddle.net/jak4efau/

但是，使用querySelector方法更方便：

var parentElement = document.querySelector(".container body-content");
var existingElement = document.querySelector(".btn.btn-default");

另请注意，当用户多次点击按钮时您需要处理这种情况，您可能不想附加多个输入字段。

Javascript - 如何使用createElement方法将<input />元素添加到div中

1 个答案: