Question

function createDivTag() {
var newDiv = document.createElement("div");
var div = document.getElementById("newtask");
div.innerHTML += document.getElementsByTagName("input")[0].value;
}

<input type="text" placeholder="Enter your task..." required  />
<!-- some code -->
<section class="start" onclick="createDivTag();">

这段代码应该在点击时使用输入值创建一个新的div元素，但没有任何反应。我错了什么？请协助解决这个问题。

Answer 1

没有像idName这样的东西，它的属性是＆＃39; id＆＃39;

    function createDivTag() {
        var newDiv = document.createElement("div");
        newDiv.id = "newtask";
        newDiv.innerHTML += document.getElementsByTagName("input")[0].value;
        document.body.appendChild(newDiv);
    }

    <input type="text" placeholder="Enter your task..." required  />
    <!-- some code -->
    <section class="start" onclick="createDivTag();">

Answer 2

您忘记添加新元素。在这个例子中，我将新div添加到正文中，但您可以将其更改为其他元素。

同样@Abdul说它应该是id而不是idName。

function createDivTag() {
   var newDiv = document.createElement("div");
   newDiv.id = "newtask";
   newDiv.innerHTML += document.getElementsByTagName("input")[0].value;
   document.body.appendChild(newDiv) //Add the item to the body
}

Answer 3

您需要在getElementById

之前设置id而不是idName将创建的div添加到body

newDiv.id = "newtask";
document.body.appendChild(newDiv);

Answer 4

您可以使用jQuery来达到目的。

假设您有输入字段名称按钮。如果单击它，则会在名为区域的范围内添加一个新div。

所以HTML将是这样的

<input type="input" id="button" value="New Div"/>
<span id="area"></span>

这是脚本

$('#button').click(function(e) {
    $('<div/>').attr({
       'id' : "myDiv"
    }).addClass('circle').css({
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('#area');

    $("#myDiv").html($("#button").val());
});

您可以在http://jsfiddle.net/CutPp/262/

结帐简单的工作jsFiddle

如何将div与输入值添加到正文？

4 个答案: