如何使用JavaScript将元素添加到HTML5代码中

Question

I've got a problem with a JavaScript code. 我遇到了JavaScript代码的问题。 I am beginner in programming so I ask to help me. 我是编程的初学者，所以我请求帮助我。 So what this script must do? 那么这个脚本必须做什么？ After clicking the submit button it must write on site a value of two form fields. 单击提交按钮后，它必须在站点上写入两个表单字段的值。 This is the HTML code: 这是HTML代码：

<!DOCTYPE HTML>
<html lang="pl_PL">
<head>
<title>KidGifter</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/scripts.js"></script>
</head>
<body>
<div id="list_help">
    <img id="smile_help" src="img/smile.png">
    <div id="info-form">
    <p id="l_h_title">Hejka!</p>
    <p id="l_h_text">Tutaj możesz stworzyć swoją liste prezentów i udostępnić ją na Facebooku lub Twitterze. Niech twoi znajomi i bliscy wiedzą co chcesz dostać!</p>
    <p id="l_h_formtitle">Najpierw wprowadź nazwę prezentu:</p>
    <form>
    <input type="text" id="formtitle">
    <p id="l_h_formdesc">A teraz możesz krótko go opisać:</p>
    <textarea id="formdescription" maxlength="230"></textarea>
    <input type="submit" value="+ Dodaj" id="sub" />
    </form>
        </div>
     </div>
</body>
</html>

And this is JavaScript code : 这是JavaScript代码：

window.onload = function(){
    var f1 = document.getElementById("f1");
    var f2 = document.getElementById("f2");
    var submit = document.getElementById("sub");
    var body = document.getElementsByTagName("body");
    submit.onclick = function() {
        html = "";
        html += "<div class='gift'>";
        html += "<div class='gifttext'>";
        html += "<p class='GiftTitle'>" + f1.value + "</p>";
        html += "<p class='GiftDescription'>" + f2.value + "</p>";
        html += "</div>";
        html += "</div>";
        body.appendChild(html);
        return false;
    }
}

Thank you for help ! 谢谢你的帮助！ :) :)

Answer 1

You must create a DOM element, put the rest of your HTML in that DOM element and use that DOM element for .appendChild() like this. 您必须创建一个DOM元素，将其余的HTML放在该DOM元素中，然后像这样使用.appendChild() DOM元素。 appendChild() doesn't take a string, it takes a DOM element. appendChild()不接受字符串，它需要一个DOM元素。 Also, your body variable wasn't correct. 此外，您的body变量不正确。 Here's a fixed up version: 这是一个固定的版本：

window.onload = function () {
    var f1 = document.getElementById("f1");
    var f2 = document.getElementById("f2");
    var submit = document.getElementById("sub");
    submit.onclick = function () {
        var html = "<div class='gifttext'>";
        html += "<p class='GiftTitle'>" + f1.value + "</p>";
        html += "<p class='GiftDescription'>" + f2.value + "</p>";
        html += "</div>";
        var div = document.createElement("div");
        div.className = "gift";
        div.innerHTML = html;
        document.body.appendChild(div);
        return false;
    }
}

Itemized changes: 分项变更：

Declare html variable as a local variable so it's not an implicit global. 将html变量声明为局部变量，因此它不是隐式全局变量。
Remove the outer div from your HTML string. 从HTML字符串中删除外部div。
Create the outer div with document.createElement("div") . 使用document.createElement("div")创建外部div。
Assign the desired class name to that div. 将所需的类名分配给该div。
Assign the HTML to the .innerHTML property of the div that was just created. 将HTML分配给刚刚创建的div的.innerHTML属性。
Append that div to the document.body object. 将div附加到document.body对象。
Remove code that was obtaining the body variable (it was wrong and document.body already exists as a shortcut reference to the body object). 删除正在获取body变量的代码（它是错误的， document.body已经存在，作为body对象的快捷方式引用）。

Answer 2

I would suggest, since your new to javascript, to look up jquery, it is a library that makes things like this much easier. 我建议，因为你的新手javascript，查找jquery，它是一个库，使这样的事情更容易。

var aDiv= document.createElement('div');
//// create p blah blah
aDiv.className = "giftText";
body.appendChild(aDiv);

but with jquery it works more like this. 但是使用jquery它更像这样。

$('body').append($('<div class="giftText">);

Answer 3

here's a working jsfiddle of the code from your question: 这是你问题代码的工作方式：

http://jsfiddle.net/hxsFH/ http://jsfiddle.net/hxsFH/

html: HTML：

<body>
    <div id="list_help">
        <img id="smile_help" src="img/smile.png">
        <div id="info-form">
            <p id="l_h_title">Hejka!</p>
            <p id="l_h_text">Tutaj możesz stworzyć swoją liste prezentów i udostępnić ją na Facebooku lub Twitterze. Niech twoi znajomi i bliscy wiedzą co chcesz dostać!</p>
            <p id="l_h_formtitle">Najpierw wprowadź nazwę prezentu:</p>
            <form>
                <input type="text" id="formtitle" />
                <p id="l_h_formdesc">A teraz możesz krótko go opisać:</p>
                <textarea id="formdescription" maxlength="230"></textarea>
                <input type="button" value="+ Dodaj" id="sub" />
            </form>
        </div>
    </div>
</body>

javascript: JavaScript的：

var f1 = document.getElementById("formtitle");
var f2 = document.getElementById("formdescription");
var submit = document.getElementById("sub");
var body = document.getElementsByTagName("body")[0];
submit.onclick = function () {
    html = "";
    html += "<div class='gift'>";
    html += "<div class='gifttext'>";
    html += "<p class='GiftTitle'>" + f1.value + "</p>";
    html += "<p class='GiftDescription'>" + f2.value + "</p>";
    html += "</div>";
    html += "</div>";
    var d = document.createElement('div');
    d.innerHTML = html;
    body.appendChild(d);
    return false;
}

如何使用JavaScript将元素添加到HTML5代码中

问题描述

3 个解决方案

解决方案1
2 2014-03-23 16:25:42

解决方案2
0 2014-03-23 16:26:52

解决方案3
0 2014-03-23 16:43:09

如何使用JavaScript将元素添加到HTML5代码中

问题描述

3 个解决方案

解决方案1 2 2014-03-23 16:25:42

解决方案2 0 2014-03-23 16:26:52

解决方案3 0 2014-03-23 16:43:09

解决方案1
2 2014-03-23 16:25:42

解决方案2
0 2014-03-23 16:26:52

解决方案3
0 2014-03-23 16:43:09