javascript - HTML image link not showing up in Safari or Chrome -

i have image supposed appear on website page. works in firefox, not appear in either safari or chrome reason. line have used image in js file:

$("#picture").append("<img src='/images/sub1/green_graph.png' alt='low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>") 

i can't seem figure out why appears in 1 browser not others , have not yet found answer problem.

edit: code html file:

<div class="row">         <div class="col-md-1">         </div>         <div class="col-md-6">           <div class="row">             <div class="col-12">               <div id="info">                 <h3 id="rank"><span style = "color:orange"> random:</span></h3>                    <div class="col-6">                     <img id="picture">                    </div>                   <div class="col-6">                     <h4 id="blockquotefield"></h4>                   </div>                 <div id="density"></div>               </div>             </div>           </div>         </div>         <div class = "col-md-4">              <img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">          </div>         <div class="col-md-1">         </div> </div> 

you appending img img. i'm surprised worked @ all.

either change parent tag:

<span id="picture"></span> 

$(document).ready(function(){  $("#picture").append("<img src='https://www.fillmurray.com/300/250' alt='low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="row">          <div class="col-md-1">          </div>          <div class="col-md-6">            <div class="row">              <div class="col-12">                <div id="info">                  <h3 id="rank"><span style = "color:orange"> random:</span></h3>                      <div class="col-6">                      <span id="picture"></span>                      </div>                    <div class="col-6">                      <h4 id="blockquotefield"></h4>                    </div>                  <div id="density"></div>                </div>              </div>            </div>          </div>          <div class = "col-md-4">               <img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">           </div>          <div class="col-md-1">          </div>  </div>

or set attributes on existing tag.

$(document).ready(function(){    $("#picture").attr("src", "https://www.fillmurray.com/300/250");    $("#picture").attr("alt", "bill awesome");    //style should come stylesheet, i'll leave    $("#picture").attr("style", "width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative");  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="row">          <div class="col-md-1">          </div>          <div class="col-md-6">            <div class="row">              <div class="col-12">                <div id="info">                  <h3 id="rank"><span style = "color:orange"> random:</span></h3>                      <div class="col-6">                      <img id="picture">                      </div>                    <div class="col-6">                      <h4 id="blockquotefield"></h4>                    </div>                  <div id="density"></div>                </div>              </div>            </div>          </div>          <div class = "col-md-4">               <img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">           </div>          <div class="col-md-1">          </div>  </div>