Как добавить элемент в код HTML5 с помощью JavaScript

Question

Как добавить элемент в код HTML5 с помощью JavaScript

0

У меня проблема с кодом 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;
    }
}

Спасибо за помощь ! :)

krystiangonczi 23 март 2014, в 17:52

Источник

1

.appendChild ожидает элемент DOM, а не строку. Кроме того, getElementsByTagName возвращает список узлов, а не один узел. Чтобы получить тело, просто используйте document.body .
Felix Kling 23 март 2014, в 16:22

Теги:

javascript

html

dom

3 ответа

Ещё вопросы

.appendChild ожидает элемент DOM, а не строку. Кроме того, getElementsByTagName возвращает список узлов, а не один узел. Чтобы получить тело, просто используйте document.body .

jfriend00 · Answer 1 · 2014-03-23T13-43-00.000Z

Вы должны создать элемент DOM, поместить остальную часть вашего HTML в этот элемент DOM и использовать этот элемент DOM для .appendChild() как это. 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 как локальную переменную, чтобы она не была неявной глобальной.
Удалите внешний div из вашей строки HTML.
Создайте внешний div с помощью document.createElement("div").
Назначьте нужное имя класса этому div.
Присвойте HTML .innerHTML только что созданного div.
Добавьте этот div в объект document.body.
Удалите код, который получает переменную body (это было неправильно, а document.body уже существует как ссылка на объект body).

QBM5 · Answer 2 · 2014-03-23T14-52-00.000Z

Я бы предположил, что с вашего нового в javascript, чтобы искать jquery, это библиотека, которая упрощает такие вещи.

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

но с jquery он работает более как это.

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

Что addClass свойство addClass ? Не имеет смысла
«поскольку вы новичок в javascript, чтобы искать jquery», это худшее, что вы можете предложить новичку.
Я бы не стал этого видеть, показав им способ выполнения задач проще, чем со стандартным JavaScript. Это облегчает жизнь новым разработчикам, но я уважаю ваше мнение, спасибо за вклад
Популярное соглашение здесь о StackOverflow - не предлагать решение jQuery, если OP не запросит его с помощью ссылки в тексте или тега jQuery.
Хорошо, спасибо, что сообщили мне, но я предложил решение в стандартном javascript и просто высказал свое мнение о jquery. Но я буду помнить это в будущем. Спасибо.

Jeremy Danyow · Answer 3 · 2014-03-23T14-34-00.000Z

здесь работает jsfiddle кода из вашего вопроса:

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