如何使用JavaScript將元素添加到HTML5代碼中

Question

我遇到了JavaScript代碼的問題。 我是編程的初學者，所以我請求幫助我。 那么這個腳本必須做什么？ 單擊提交按鈕后，它必須在站點上寫入兩個表單字段的值。 這是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>

這是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;
    }
}

謝謝你的幫助！ :)

Answer 1

您必須創建一個DOM元素，將其余的HTML放在該DOM元素中，然后像這樣使用.appendChild() DOM元素。 appendChild()不接受字符串，它需要一個DOM元素。 此外，您的body變量不正確。 這是一個固定的版本：

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;
    }
}

分項變更：

將html變量聲明為局部變量，因此它不是隱式全局變量。
從HTML字符串中刪除外部div。
使用document.createElement("div")創建外部div。
將所需的類名分配給該div。
將HTML分配給剛剛創建的div的.innerHTML屬性。
將div附加到document.body對象。
刪除正在獲取body變量的代碼（它是錯誤的， document.body已經存在，作為body對象的快捷方式引用）。

Answer 2

我建議，因為你的新手javascript，查找jquery，它是一個庫，使這樣的事情更容易。

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

但是使用jquery它更像這樣。

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

Answer 3

這是你問題代碼的工作方式：

http://jsfiddle.net/hxsFH/

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的：

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