Question

我正在使用以下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内容时没有显示任何内容。

Answer 1

试试这个。

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

Answer 2

尽管

，但我的工作正常

JQUERY CODE：

$(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 ();

});

现场演示： http://jsfiddle.net/dreamweiver/k9pCY/1/

只是看看你是否正确加载了所有Jquery库并从代码中删除了那些无用的斜杠，它们是不必要的：）

快乐编码：）

Answer 3

没有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：）

<div>不是在javascript </div>中飞行创建的

3 个答案: