<div> не создан на лету в JavaScript

Question

<div> не создан на лету в JavaScript

0

Я использую следующую функцию JavaScript, создаю элемент <div> на лету.

function display()
{
    if (accessTokenValue === '')
    {
        alert("inside if");

        $('#mainDivId').addClass('ui-content jqm-content feed');
        $('<div id="linkToInstagramDivId"></div>')
            .html('
<p><img src="img/instagram-logotype.png" alt="" /></p>
<p>Link To Instagram</p>
<div><input type="button" data-inline="true"
value="Sign In" onclick="LinkToInstagram();"></div>'
            )
            .appendTo('#mainDivId');

        alert("inside after if");
    }
    else
    {
        alert("inside else");

        $('#mainDivId').addClass('ui-content jqm-content');
        $('<div id="uploadToInstagramDivId"></div>')
            .html('
<p>Upload Photos To Instagram</p>
<input type="button" value="Upload Photos" data-inline="true"
onclick="UploadToInstagram();">'
            )
            .appendTo("#mainDivId");
    }
}

Никакое изменение не происходит на странице, оно остается пустым. Кроме того, Firebug ничего не показывает при создании вышеуказанного содержимого html.

user3519216 23 май 2014, в 07:32

Источник

0

я думаю, что вы пропустили добавление div к документу, как мы делаем в dom. Вы можете проверить то же самое с JQuery
vikeng21 23 май 2014, в 04:52
0

как делать с jquery ?????
user3519216 23 май 2014, в 04:54
0

срабатывает оповещение?
Reigel 23 май 2014, в 04:55
0

да, предупреждения запускаются, даже класс не получает добавление к этому div #mainDivId Я проверил это в firebug
user3519216 23 май 2014, в 04:57
0

Пожалуйста, покажите нам HTML, или, пожалуйста, производите коды на jsfiddle.net
Reigel 23 май 2014, в 05:01
0

я не эксперт по jquery, но это то же самое, что мы думаем о js, после создания нового элемента мы наконец добавляем его в документ. Вы также можете проверить это на SO
vikeng21 23 май 2014, в 05:03
0

Не требуется экранирующий символ '\'.
Deepak Tiwari 23 май 2014, в 05:08
0

кто-то отредактировал это и поставил escape-последовательности, а не я
user3519216 23 май 2014, в 05:14
0

Сохраните это как прежде.
Deepak Tiwari 23 май 2014, в 05:15
0

Я отклонил редактирование, но оно все равно прошло, не согласен, форматируют ли люди код, изменяя его значение.
Lankymart 23 май 2014, в 05:16
1

проверить ссылку jsfiddle.net/FTFum .
user3519216 23 май 2014, в 05:20

Показать ещё 9 комментариев

Теги:

javascript

jquery

android

html5

cordova

3 ответа

0

его рабочий штраф для меня там, хотя

КОД JQUERY:

$(document).ready (function () {
var accessTokenValue = "Terminator";

function display () {
 if (accessTokenValue == '') {
    alert("inside if");

      $('#mainDivId').addClass('ui-content jqm-content feed');
        $('<div id="linkToInstagramDivId"></div>')
            .html('<p><img src="img/instagram-logotype.png" alt="" /></p><p>Link To Instagram</p><div><input type="button" data-inline="true" value="Sign In" onclick="LinkToInstagram();"></div>')
           .appendTo('#mainDivId');

       alert("inside after if");
    } else {
        alert("inside else");

    $('#mainDivId').addClass('ui-content jqm-content');
    $('<div id="uploadToInstagramDivId"></div>')
        .html('<p>Upload Photos To Instagram</p>
            <input type="button" value="Upload Photos" data-inline="true"
            onclick="UploadToInstagram();">').appendTo("#mainDivId");
 }

 //call display onLoad
 display ();

});

LIVE DEMO: http://jsfiddle.net/dreamweiver/k9pCY/1/

просто просмотрите, что вы загрузили все Jquery lib правильно или нет и удалите эти косые черты из вашего кода, они необходимы! :)

Счастливое кодирование :)

dreamweiver 23 май 2014, в 03:41

0

это не сработало, я сбит с толку .....
user3519216 23 май 2014, в 06:31
0

@ user3519216: ты имеешь в виду, что jsfiddle, который я написал, не работает? или твой код не работает?
dreamweiver 23 май 2014, в 07:29
0

я не хочу этого
user3519216 23 май 2014, в 09:15
0

@ user3519216: не имеет значения, откуда вы вызываете функцию, то, что я сделал в jsfiddle, было просто примером, показывающим рабочий код. когда именно вы думаете, чтобы вызвать эту функцию?
dreamweiver 23 май 2014, в 09:49
0

когда страница загружается, функция должна автоматически выполняться, как при вызове скрипта ...
user3519216 23 май 2014, в 10:10
0

@ user3519216: это не должно быть проблемой, вы просто вызываете полную функцию внутри $(document).ready(function () { //call display() here }) . отредактировал мой ответ.
dreamweiver 23 май 2014, в 10:22

Показать ещё 4 комментария

0

Без JQuery...

function display(){
if (accessTokenValue === '') {
    var newdiv = document.createElement('div');
newdiv.id = "linkToInstagramDivId";
newdiv.innerHTML = '<p><img src="img/instagram-logotype.png" alt="" /></p><p>Link To Instagram</p><div><input type="button" data-inline="true" value="Sign In" onclick="LinkToInstagram();"></div>';
document.getElementById("mainDivId").appendChild(newdiv);
} else {
var maindiv = document.getElementById('mainDivId');
maindiv.className += " ui-content jqm-content";
var newdiv = document.createElement('div');
newdiv.innerHTML = '<p>Upload Photos To Instagram</p><input type="button" value="Upload Photos" data-inline="true" onclick="UploadToInstagram();">';
maindiv.appendChild(newdiv);
};

};

Забыл точку с запятой... oops :)

adeptCOGnition 23 май 2014, в 03:04

0

это не сработало ..
user3519216 23 май 2014, в 05:28

Ещё вопросы

я думаю, что вы пропустили добавление div к документу, как мы делаем в dom. Вы можете проверить то же самое с JQuery
да, предупреждения запускаются, даже класс не получает добавление к этому div #mainDivId Я проверил это в firebug
Пожалуйста, покажите нам HTML, или, пожалуйста, производите коды на jsfiddle.net
я не эксперт по jquery, но это то же самое, что мы думаем о js, после создания нового элемента мы наконец добавляем его в документ. Вы также можете проверить это на SO
Не требуется экранирующий символ '\'.
кто-то отредактировал это и поставил escape-последовательности, а не я
Я отклонил редактирование, но оно все равно прошло, не согласен, форматируют ли люди код, изменяя его значение.
это не сработало, я сбит с толку .....
@ user3519216: ты имеешь в виду, что jsfiddle, который я написал, не работает? или твой код не работает?
@ user3519216: не имеет значения, откуда вы вызываете функцию, то, что я сделал в jsfiddle, было просто примером, показывающим рабочий код. когда именно вы думаете, чтобы вызвать эту функцию?
когда страница загружается, функция должна автоматически выполняться, как при вызове скрипта ...
@ user3519216: это не должно быть проблемой, вы просто вызываете полную функцию внутри $(document).ready(function () { //call display() here }) . отредактировал мой ответ.

Deepak Tiwari · Accepted Answer · 2014-05-23T02-17-00.000Z

Попробуй это.

var temp=$('<div id="linkToInstagramDivId"></div>');
temp.html('<p><img src="img/instagram-logotype.png" alt="" /></p><p>Link To Instagram</p><div><input type="button" data-inline="true" value="Sign In" onclick="LinkToInstagram();"></div>');

$('#mainDivId').after(temp);

Убедитесь, что вы добавили последние jquery.js.

Изменить: проблема в том, что вы загружаете функцию отображения, когда ваша страница не загружена, поэтому она не отображала изменений. Напишите свою полную функцию отображения и вызов функции в ready() следующим образом:

$(document).ready(function() {
    var accessTokenValue="";
    function display()
    {
        if (accessTokenValue == '')
        {
            alert("inside if");

            $('#mainDivId').addClass('ui-content jqm-content feed');
            $('<div id="linkToInstagramDivId"></div>')
                .html('<p><img src="img/instagram-logotype.png" alt="" /></p><p>Link To Instagram</p><div><input type="button" data-inline="true" value="Sign In" onclick="LinkToInstagram();"></div>')
                .appendTo('#mainDivId');
            alert("inside after if");
        }
        else
        {
            alert("inside else");

            $('#mainDivId').addClass('ui-content jqm-content');
            $('<div id="uploadToInstagramDivId"></div>')
                .html('<p>Upload Photos To Instagram</p><input type="button" value="Upload Photos" data-inline="true" onclick="UploadToInstagram();">')
                .appendTo("#mainDivId");
        }
    }
    display();
});