How to append html using jQuery?

Question

I have been trying to append html data from a html file to a html page. It seems to be something very simple, but it is not working! Can you help me?

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var theCitiesList="<?php echo htmlentities(file_get_contents("cityOptions.html")); ?>";
        $("select#chooseCity").html(theCitiesList);                 
    });
</script>
</head>
<body> 
    <FORM id="searchForm">
        <h2>Selecione uma cidade: </h2>            
        <select id="chooseCity"></select>
    </FORM>
</body>  
</html>

cityOptions.html is basically a long list of cities such as:

        <option value="" selected></option>
        <option value="1">California</option>
        <option value="2">New York</option>

Instead of require, check out file_get_contents instead us1.php.net/file_get_contents — snollygolly
– snollygolly, Commented Feb 13, 2014 at 13:45
Having PHP code in a javascript variable that is then used in .html() won't cause the PHP code to be executed. Perhaps using jQuery's .ajax() methods you can retrieve the cityOptions.html content, and insert it? — Matt Sach
– Matt Sach, Commented Feb 13, 2014 at 13:51
@SLoW Sorry, what do you mean? The php require part of the code was commented! I removed it! — DanielTheRocketMan
– DanielTheRocketMan, Commented Feb 13, 2014 at 13:52

Hüseyin BABAL · Accepted Answer · 2014-02-13 13:58:54Z

2

You can use JQuery .load() like;

$("select#chooseCity").load("cityOptions.html");

This will load cityOptions.html in to your specified html area

answered Feb 13, 2014 at 13:58

Hüseyin BABAL

15.6k5 gold badges53 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

.load() is shortcut of $.get():

$(document).ready(function() {
    $.get('cityOptions.html', function(data) {
        $('#chooseCity').html(data);
    });            
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 13, 2014 at 14:02

Chen-Tsu Lin

23.3k16 gold badges56 silver badges65 bronze badges

1 Comment

Hüseyin BABAL Over a year ago

@DanielTheRocketMan I have sent answer before this answer. You were able to do it with .load(). However, you have select longer version of .load(). This seems strange

anurupr · Accepted Answer · 2014-02-13 13:59:36Z

cityOptions.html had newlines \n. replacing it helps.

<html>
<head>       
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var theCitiesList='<?php echo str_replace(array("\r\n", "\n", "\r"), "",file_get_contents("cityOptions.html"));  ?>';
            $("select#chooseCity").html(theCitiesList);                 
        });
    </script>
</head>
<body>
    <form id="searchForm">
        <h2>Selecione uma cidade: </h2>            
        <select id="chooseCity">

        </select>
    </form>
 </body>

thank you for your answer, but it is not solving the problem. Do you think the rest is ok?

Collectives™ on Stack Overflow

How to append html using jQuery?

3 Answers 3

Comments

.load() is shortcut of $.get():

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

.load() is shortcut of $.get():

1 Comment

1 Comment

Linked

Related