.append() an img tag?

Asked

Viewed 627 times

1

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

<input type="file" multiple id="file-input" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="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>
jquery html

  • What do you mean "tag"? It’s not an image you want?

  • @Sergio I want to write the tag code in order to appear for example, <img src='images/images/events/1.jpg' />

  • I still don’t understand what you mean by "tag code"... You want to insert HTML without being interpreted, is that it? for the HTML view of the user?

  • @Sergio Exactly, is there a way to achieve this? I’ve used .html() but it didn’t work.

  • Okay, then you should use .text() instead of .html(). Test it and tell me if that’s what you wanted.

  • @Sergio Tenta but only shows me the last selected image

  • Exactly, I’ll give you a more complete answer I just wanted to make sure that the .text is what you were looking for.

Show 2 more comments

4 answers

3


A very simple solution, changing only one character of your code, would replace the sign that opens the tag <img> "<" (less than) per "&lt;". 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>
<input type="file" multiple id="file-input" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="id">

</div>

0

I think what Voce wants 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>
<input type="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>

  • That’s not quite it, I wanted to select the images with an input, and when I did, present not only the name, but <img src="filename.jpg" />

  • I believe it’s just to use the text

  • @Brunomoutinho I edited the code up, just executar and see if that’s it

  • The problem is that it doesn’t work in a <input type="file" Multiple> as I wanted, it just shows the last one

  • Just play in a for, give me a minute, I’ll edit the code

  • @Brunomoutinho I updated the code

Show 1 more comment

0

As you are adding a tag by passing your respective src then it will load the image, it would be better if you apend 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>
<div id="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>

  • But I would also want to add <img> and not only src

  • got it, just put at the beginning of the tag in place of '<' the value &lt; getting the append like this: $("#id"). append(" &lt;img src=images/images/events/"+thisfile+"/>");

  • But if you enter it into the database, you will enter it as < or as &lt; ?

  • This way will insert &lt; because when you search from the database to render it will write the tag string.

0

You must use the .text() jQuery:

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>
<div id="id"></div>

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.