.append () an img tag?

Question

.append () an img tag?

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I would like to insert a tag using append but whenever I try, it tries to insert an image into the div that I want to insert only the text, is there any way I can do it?

<input type="file" multiple id="file-input" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script><divid="id">

</div>
<script>
$("#file-input").change(function(){
  $("#id").empty();
  var names = [];
  for (var i = 0; i < $(this).get(0).files.length; ++i) {
    var thisfile = $(this).get(0).files[i].name;
    $("#id").append("<img src='images/images/eventos/"+thisfile+"' /><br/>");
  }
})

</script>

html jquery

asked by anonymous 12.09.2017 / 22:21

4 answers

0

You should use .text() of jQuery like this:

var files = ['la-la-la', 'le-le-le', 'li-li-li'];
// no teu caso podes usar 
// var files = $(this).get(0).files;

var text = files.map(file => "<img src='images/images/eventos/" + file + "' />").join("\n");
$("#id").text(text);

// e para criar quebra de linhas
$("#id").html($("#id").html().replace(/\n/g, '<br>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="id"></div>

12.09.2017 / 22:40

0

I think what you want is this. Or at least that's what I understood, correct me if I'm wrong.

$('button').on('click', function(){
   var imagem = $('#imag').val();
   $('body').text('<img src="'+imagem+'">')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" id="imag" placeholder="CAMINHO DA IMAGEM">
<button>inserir</button>

UPDATED

$('input').change(function(){
  var names = [];

  for (var i = 0; i < $(this).get(0).files.length; ++i) {
    var thisfile = $(this).get(0).files[i].name;
    $("#id").append(document.createTextNode("<img src='images/images/eventos/"+thisfile+"' /><br/>"));
  }
})

<input type="file" multiple>
  <div id="id"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

12.09.2017 / 22:30

0

As you are adding a tag passing its respective src so it will load the image, you'd better give an append using the p tag and the text being the path of the image as you want.

<input type="file" multiple id="file-input" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script><divid="id">

</div>
<script>
$("#file-input").change(function(){
  $("#id").empty();
  var names = [];
  for (var i = 0; i < $(this).get(0).files.length; ++i) {
    var thisfile = $(this).get(0).files[i].name;
    $("#id").append("&lt;img src='images/images/eventos/"+thisfile+"'/>");
  }
})

</script>

12.09.2017 / 22:33

Repeat previous rows when there is no record in SQL SERVER date Register user with photo on firebase

score 3 · Accepted Answer

A very simple solution, changing only one character of your code , would replace the signal that opens the tag <img> "<" (less than) by " < ". This way the browser will treat the tag as a string:

$("#file-input").change(function(){
  $("#id").empty();
  var names = [];
  for (var i = 0; i < $(this).get(0).files.length; ++i) {
    var thisfile = $(this).get(0).files[i].name;
    $("#id").append("&lt;img src='images/images/eventos/"+thisfile+"' /><br/>");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="file" multiple id="file-input" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script><divid="id">

</div>